👀 CLEANER Tailwind classes #tailwindcss #css #tutorial #javascript #webdevelopment

You don't need a library like clsx() to toggle Tailwind classes. data attributes are more powerful!

#whiteboardtheweb

[JJordy]

I love SolidJS for the baked in classList property on all elements, no library required.

[Noam-Bahar]

That's really cool! I haven't thought about this before.

[CoryTheSimmons]

Cool idea but I really like the clsx/tw-merge/CVA approach.

[dealloc]

I do this pretty much whether I use Tailwind or not, especially with ARIA attributes.

It also makes it much easier to write unstyled components without having to expose a ton of props just for style purposes in frameworks. Just attach the state on ARIA/data attributes where it makes sense!

[Krzysiekoy]

yoooo, bruv is onto something with this one

[SuperKidontheblock]

I use it to expose state to other components

[IainSimmons]

Unless every use of those prefixed classes is the same across all components, you run the risk of significantly increasing the size of the generated CSS.

So, particularly if it's something you use a lot, like a bg- class, you get that AND every data-[...]: prefixed version in the output CSS.

[mladendubovac]

I'm actually using this technique within Next UI components and although it may be repetitive at times, it does feel a lot cleaner not using js logic 😂

[thedigitalceo]

This is one of my biggest complaints of tailwind. It bloats your semantic html whereas css modules can contain all the styles for the component but I get why people like tailwind

[saadsiddiqui]

Bro what's the font style of the vs code?

[alastairtheduke]

I like the look of your shorts, but rarely get anything useful out of them, because they fel like they have too much crammed into them? maybe it's the white board vs editor? I don't know