Hacker News new | ask | show | jobs
by Vinnl 2029 days ago
I'd be interested in a description of the actual real-world benefits the "magic of Tailwind" and the "flexibility of CSS-in-JS" provide. I've only just started trying to understand what concrete advantages Tailwind brings [1], but as I understood it, one of its advantages is that it's not CSS-in-JS. Because it's not necessary: CSS-in-JS prevents styles from one component leaking into another, but Tailwind classes already only apply to the element they are added to.

I'm not ready to dismiss new initiatives off the bat (if anything they can at least be a good learning experience), but I'd like more concrete terms than "magic" and "flexibility" to help me understand the potential benefits.

[1] https://twitter.com/VincentTunru/status/1330103979762651138
2 comments
sbergot 2029 days ago
This post is a good description of why some people like functional css: https://adamwathan.me/css-utility-classes-and-separation-of-...
link
Vinnl 2029 days ago
Right, I'm roughly familiar with that (see the linked Twitter thread), but I'd be interested to know what the author's view of their benefits are, and how this project provides them in a way that either independently does not.

(And potentially also: what are their downsides, and does this project suffer from them as well?)

link
the_other 2029 days ago
> classes already only apply to the element they are added to.

So they're IDs, not classes?

link
Vinnl 2029 days ago
Ah sorry, I worded that incorrectly. Should've been "the styles defined via Tailwind classes already only apply to the element they are added to."

(Ninja edit:) So to clarify: if I want to add some padding to an element with plain CSS, I have to think of a class name for that element, and then define styles for that class. However, if I happen to use that class name elsewhere in my code, then the styles I've defined there suddenly apply to that element as well. And vice versa: before I can delete a class from my code base, I have to be aware of every element that uses it.

CSS-in-JS solves that: all styles defined for a single component will only ever apply to that component.

The same holds true for Tailwind: you define the styles through the classes you apply, which will not affect other components in your codebase, and likewise, removing them (the Tailwind classes) is safe as well.

link