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. source.
How does tailwind solve the "declaration order" problem he talks about? I tried it myself with the following example:
Why does bg-red-500 always the one being applied regardless of the order? how does tailwind determine the order of classes?
Theo - t3․gg
YouTube
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-...
8 Replies
If you have the tailwind extension you can hover over a class & see exactly what CSS is generated @void.
About declaration usually the last one wins
Theo uses this extension to sort tailwind classes: https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
Headwind - Visual Studio Marketplace
Extension for Visual Studio Code - An opinionated class sorter for Tailwind CSS
Basically the idea is there are sometimes really obtuse CSS-ordering shenanigans. not very applicable to tailwind because you typically serve it as a single .css file and obviously the styles within each class don't conflict
but more importantly, it just means that the order is consistent.
bg-red-500 will always be first, regardless of who writes the code and what prettier has to say.
so, really not necessary but i would personally recommend.the example in my question contradicts what u just said. In plain CSS your right, but when ur sing tailwind, i think its false. try the example above.
are u talking about
headwind?
because without headwind bg-red-500 will always be first. I think tailwind has some pre-determined order on how classes are defined in the final .css file.nah bro that’s the vscode extension doing that lol. the tailwind lsp probably should be doing this as a default, but i don’t think it does.
is it installed by default or something? because i havent installed that extension
idk, maybe the tailwindcss extension does it by default. it didn’t used to though. i do know that the tailwind lsp doesn’t do it because i don’t get it in my nvim
but typically vscode extensions have more features than the lsp itself
the order of classes in tailwind css is always fixed. The plugin/extension to sort tailwind classes doesn't change anything on the outcome. What it does: it makes it more obvious which of two conflicting tailwind classes would win.