The order of multiple css

1

At the moment i have this:

@import "./own.css";
@import "./index.css";
@import "./lightbox.css";
@import "./prism.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

An easy example is

hr

kirby’s index.css defines the width as 1.5 rem
my own.css defines it as 100%

I can exchange the position of index.css and own.css;
it still stays with 1.5 rem

But why?
Normally the last one sets the final value (i have learned and used the last ten years)

2

Hi,

normally I would go the other way around and put own.css as the last item after everything else.
In addition tailwind should come before everything else.
So, in your case that would mean


@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./lightbox.css";
@import "./prism.css";
@import "./index.css";
@import "./own.css";
3

Yes, i tried this also, but for which reason ever, this doesnt help.
I also have aproblem with “preflight”? It seems that this resets a lot of values, while i want to use a css-framework to have them.

I also dont understand why tailwind needs so much blabla to add custom css.
These imports from above are not working. Or do work only with another download/install.

In foundation i just could add my files …

4

Why do you want to use TailwindCSS if you don’t like it?

5

I test it like i have tested Bulma and Zurb Foundation before. Tailwind has a lot of finished blocks, they sell hundreds of them on several pages.

I am still a beginner on this, but some things like adding own css in given or own files should be standard everywhere, i think.

Anyway i still have no idea/docs how to manage the given output from layouts and blocks and own css.

6

Well, that might be as it is, but this is the Kirby forum. So if you have TailwindCSS specific questions or complaints, you will be better off in a Tailwind forum.