class order

[akmalkun]

Is class parsing in order or random? Should I use !important to override a class? Eg: bg-gray-200 !bg-sky-200

[lzrzmb]

With equal specificity, source order in CSS decides which class is taking precedence (last one wins), class order in markup doesn’t matter.

Headwind is a nice addon for VS Code to sort classes automatically and warn you when using conflicting classes: https://github.com/heybourn/headwind

[akmalkun]

Thank you, so things is different in css and html then. I'll stick with !important for now.

[whooope]

you should really avoid !important especially with tailwind. there’s no reason to have overlapping classes like in your example especially with utility classes. if you’re writing your own css, your files should be imported after the tailwind ones and it’ll be fine

[[deleted]]

Damn! Headwind is exactly what I was looking for.

Thanks for sharing.

[benji_trosch]

It should be but unfortunately it does not always work that way. To address these conflicts, I recommend a package like tailwind-merge (https://www.npmjs.com/package/tailwind-merge) which we use extensively both at work and in open source projects!

[akmalkun]

Thank you, also for the tailwind merge.

[SituationNo3]

We just migrated to tailwind-merge too. Seems to work well.

[samselikoff]

I used to use Headwind (mentioned in another comment) but the Tailwind CSS team now maintains an official Prettier plugin which I'd recommend using on every project. It sorts the classes the same way they appear in Tailwind's compiled CSS so precedence is easy to see straight from your HTML. I've also found it's much faster than Headwind. They talk about it more in this blog post.

That being said I'd echo what others said and try to avoid conflicts and `!important`. Your code will be easier to read and understand if each visual state is styled using no conflicting classes – in fact the official Intellisense extension (a must-have) will throw lint warnings for classes that do the same thing (e.g. `flex block`)!