Adam Wathan @adamwathan.com · Nov 30

Little Tailwind tip — instead of trying merge classes and manage conflicts with `!important`, style things based on data or ARIA attributes and just handle everything declaratively with CSS:

175 likes 9 replies

?

Replies

Peter Van Dijck · Nov 30

Lazy web ask: these tips but in markdown format so I can feed them into Claude

Justin Jackson · Nov 30

That's a good tip!

Les · Dec 1

Curiosity... What is gained by using the tip's approach and what is lost by not using the tip ? I just changed a chunk of code so that I the "!" approach is no longer needed, but I am curious about this tip. Thank you

Tom Slutsky · Nov 30

Great tip. I find very few cases to use !important when having full control over the styles (not embedded or anything). Not just with tialwind but with css in general.

Shefali · Dec 2

Great tip. Thank you, Adam!

ClikoDev 𝝠 · Dec 1

that's what tailwind-merge is for www.npmjs.com/package/tail...

Martin Palma · Nov 30

What about handling the state using the "data-..." attribute? Or is there an advantage of using ARIA attributes?

Rohit Gulam · Nov 30

Good one! Thanks for sharing