Comment by hailpixel | Hacker News Reader

Comment by hailpixel | Hacker News Reader

I love tailwind, and I've been writing CSS professionally since CSS2.1. I have often debated with many developer friends why it has performed so well, and this article really missed some big reasons:

1. It's works extremely well with the current component-focused UI frameworks (react, svelte, etc). Subsequently, the verboseness that is often a complaint isn't an issue at all, but a feature.

2. Does everything out of the box, and very easy to customize.

3. And, most importantly, it allows for easy art direction. Does one button need to be a slightly different size or color for this one specific element? Chuck an extra modular class on it. No need to build a complex cascasding or edge cases. (Shout out to `tailwind-merge`)

Point 3 for me speeds up production work immensely. Also, not being in JS has shrunk bundle sizes by a small amount, which is always welcome in this era.

I agree with all of your points. I am kind of shocked that I had to scroll so far down to see point #3 on this thread at all.

CSS doesn't give the best toolset in order to do styling and organize styling. The locality of HTML structure and styling makes things far easier to work with.

I would also throw in that front end coding feels far more fickle and arbitrary. Tailwind allows me to define a set of rules and then apply them directly. It ends up being more maintainable when used in conjunction with component abstractions.

CSS cascades all the way from global to element’s style attribute

1. For component usage and in this case only restricted. You can only style the top layer of a component, not each part. But for component development, tailwind made it complex, e.g. if you want to make it possible to set / add custom styles to each sub-element.

2. Vanilla CSS too.

3. For designers with individual styling of components Tailwind is great, but not for app where elements have the same style or developed at component level.

You can use normal CSS and use @apply if that was necessary.

His first point is the same as your first point?

About point #3, I'd just like to point out that CSS layers exist.

How do you style with pseudo selectors (e.g. :hover)?

You prefix the class with hover: or focus: etc. very powerful, although this is where a lot of people start to find it gross especially when you add breakpoints into the mix.

https://tailwindcss.com/docs/hover-focus-and-other-states

Reply on news.ycombinator.com