12 replies

Tailwind Class Order

Hello, i'm new to tailwind and trying to understand it better. I came across one of theo's video about tailwind in which he talked a bit about

declaration order

declaration order

declaration order

declaration order. source.

How does tailwind solve the "declaration order" problem he talks about? I tried it myself with the following example:

    <p class="h-20 bg-blue-500 bg-red-500">Tailwind Test</p>

    <p class="h-20 bg-blue-500 bg-red-500">Tailwind Test</p>

    <p class="h-20 bg-blue-500 bg-red-500">Tailwind Test</p>

    <p class="h-20 bg-blue-500 bg-red-500">Tailwind Test</p>

Why does

bg-red-500

bg-red-500

bg-red-500

bg-red-500 always the one being applied regardless of the order? how does tailwind determine the order of classes?

Note: off-topic but it would also be great if someone could explain how tailwind actually scans and generates the css? is there some kind of processor?

Note: off-topic but it would also be great if someone could explain how tailwind actually scans and generates the css? is there some kind of processor?

Note: off-topic but it would also be great if someone could explain how tailwind actually scans and generates the css? is there some kind of processor?

Note: off-topic but it would also be great if someone could explain how tailwind actually scans and generates the css? is there some kind of processor?

YouTubeTheo - t3․gg

Is Tailwind really the right default?

Tailwind is quickly taking over the entire style world to the point where it's now the default for most things. But is this a good thing?

Thank you Convex for sponsoring! Check them out at: https://soydev.link/convex

SOURCE
https://x.com/stylexjs/status/1842998957896782145

Want to sponsor a video? Learn more here: https://soydev.link/sponsor-...

Tailwind Class Order

Similar Threads

Similar Threads

Similar Threads