Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS's problems are Tailwind's problems

colton.dev

Post reply on HN
Print view View original

171–179 of 179 posts

Re: CSS's problems are Tailwind's problems

#171

Post by phatskat »

Ray-D-Song wrote: post #166

Tailwind is bound to succeed, because JavaScript and JSON succeeded, and so did yaml. The core logic is: People like things that are simple to the point of being stupid, myself included.

Yep! I was a heavy Bootstrap user for many years, along with all the fun of maintaining sprawling trees of SASS files, imports, utility functions etc.

I hemmed and hawed when I first had to learn Tailwind - “what are these classes? How does that work? Excuse me what?” But honestly it took very little time to get the hang of it, and with the Tailwind LSP it’s so simple that it seems like using anything else would be annoying at best.

Re: CSS's problems are Tailwind's problems

#172

Post by phatskat »

emmacharp wrote: post #160

Some real issues with Tailwind I don't see mentioned as often is they should revolve around the lack of some modern and efficient CSS features and techniques and the inefficient, outdated habits it tends to promote as a result. Over-reliance on media queries and the absence of the clamp() function are just two obvious examples among many others. Performance and browser devtool usability also suffer under Tailwind (co…

I am curious to hear more, particularly around performance. I also don’t quite grok the bit about “browser dev tool usability”.

There’s no reason you can’t add utility classes for clamp() in tailwind, and while I haven’t tried it, you should even be able to do things like `class=“w-[clamp(200px,40%,400px)]”` in Tailwind. A quick look at the docs and there’s an example of inlining calc() this way, so I don’t think clamp() would be any different.

Maybe Tailwind could add a clamp utility in the future, eg. `class=“clamp:w-2:w-full:w-16”` to evaluate to `clamp(8px, 100%, 64px)`, seems like that could be useful for avoiding the “over-reliance on media queries”. Side note: I’ll admit I haven’t looked much into the performance issues or inefficiencies of media queries, I’d love to see some writing on that.

Re: CSS's problems are Tailwind's problems

#173

Post by phatskat »

shmolyneaux wrote: post #120

I don't really do much in the web ecosystem, but I'm surprised how many people have a strong dislike for tailwind. I've had a lot of success using it. I'm really suspicious about the performance concerns brought up in the article. Does the author think that long strings are really such a huge issue for the size of the JS bundle or processing time in the browser? From my experience it's much easier to refactor the sty…

> Inspecting the element in the browser would immediately show you that you set the text to multiple colors.

Even better, the Tailwind LSP will show a diagnostic warning if two classes affect the same property, eg “The text-blue and text-red classes affect the same property” or something like that.

Re: CSS's problems are Tailwind's problems

#174

Post by phatskat »

etchalon wrote: post #116

Tailwind's problems can be summed up as "There are a lot of people who don't want to learn CSS, and even more who don't want to learn how to maintain it well."

I’ve been doing web development for around 20-ish years and done plenty of CSS, lots of organizing files, SCSS, and been on large teams with great design systems, and I’ll take Tailwind any day.

Re: CSS's problems are Tailwind's problems

#175

Post by phatskat »

827a wrote: post #64

My complaint with tailwind is that it doesn't do a good job of working well with components. E.g. if I have a component that wants to set a default background color for a button, but makes it customizable, I might think to do something like this? export function MyButton({ className }) { return } But that doesn't really work, because ultimately we've just provided both the bg-red-500 and bg-green-500 classes, and we'…

I don’t know that this exactly addresses your issue, in fact I don’t think it does, but when I have a case like this there’s two approaches:

The first is that my button will have variants, eg “primary, secondary, danger”. Those are a prop, the prop only accepts those values, and the value determines the classes applied

``` ```

You could also have those variants just make a class=“variant-” class and then use scoped styles to apply the proper classes - I’ve personally moved away from scoped styles in the last year.

Alternatively, such as in your case, I’d honestly lean towards !important:

``` ```

And I know I know, !important bad!, and at least with Tailwind it’s obviously clear when someone has used !important. There’s no need to dig into the style files to track down the rule only to find someone sprinkled !importants everywhere.

Re: CSS's problems are Tailwind's problems

#176

Post by phatskat »

roguecoder wrote: post #101
lenkite wrote: post #4

If you go even minimally outside the beaten path, the tailwind CSS declarations can mutate into a frankenstein monster that makes regular CSS look like a friendly, cute koala Example: https://www.nikolailehbr.ink/blog/realistic-button-design-cs... shows an "old fashioned", 90's are back-in-vogue, 3d button. Tailwind CSS for it becomes After I got eye-strain and headaches after taking over maintenance of a tailwind ba…

The power of CSS is that it can capture semantics. Tailwind gives up on all of that.

I’m a bit lost on this point - can you give an example of CSS capturing semantics?

Re: CSS's problems are Tailwind's problems

#177

Post by emmacharp »

phatskat wrote: post #172
emmacharp wrote: post #160

Some real issues with Tailwind I don't see mentioned as often is they should revolve around the lack of some modern and efficient CSS features and techniques and the inefficient, outdated habits it tends to promote as a result. Over-reliance on media queries and the absence of the clamp() function are just two obvious examples among many others. Performance and browser devtool usability also suffer under Tailwind (co…

I am curious to hear more, particularly around performance. I also don’t quite grok the bit about “browser dev tool usability”. There’s no reason you can’t add utility classes for clamp() in tailwind, and while I haven’t tried it, you should even be able to do things like `class=“w-[clamp(200px,40%,400px)]”` in Tailwind. A quick look at the docs and there’s an example of inlining calc() this way, so I don’t think cla…

Hello! Sorry for the delay, I thought the thread was indeed dead. Hehe.

Maybe you are right about clamp(), but I still think it's only available through “obscure” means if I may say so. So yeah, a clamp utility would help.

On performance and DevTools:

Take this site for instance: https://bentonow.com According to Chrome’s coverage panel, 75% of the CSS is unused on the homepage. I’ve seen this pattern on a lot of Tailwind sites. With native CSS, it’s easier to serve styles just-in-time, alongside related components. That way, users aren’t forced to download styles for pages they’ll never visit. HTTP/3 makes this kind of modular CSS much more viable.

As for DevTools, I find them much lighter, simpler, and faster to use with native CSS compared to functional CSS like Tailwind. The DOM is cleaner, and the cascade panel is far more intuitive to explore. Selectors actually mean something and reflect real relationships between content elements.

If you want to compare, you can have a look at https://ecss.info/en and then check out any Tailwind site in the DevTools.

Happy to chat more if you’re interested!

Re: CSS's problems are Tailwind's problems

#178

Post by etchalon »

phatskat wrote: post #174
etchalon wrote: post #116

Tailwind's problems can be summed up as "There are a lot of people who don't want to learn CSS, and even more who don't want to learn how to maintain it well."

I’ve been doing web development for around 20-ish years and done plenty of CSS, lots of organizing files, SCSS, and been on large teams with great design systems, and I’ll take Tailwind any day.

I find it absolutely weird when someone knows CSS and finds Tailwind preferable. It's like finding out a carpenter loves Ikea.

Re: CSS's problems are Tailwind's problems

#179

Post by robin_reala »

etchalon wrote: post #178
phatskat wrote: post #174

Earlier quoted context omitted.

I’ve been doing web development for around 20-ish years and done plenty of CSS, lots of organizing files, SCSS, and been on large teams with great design systems, and I’ll take Tailwind any day.

I find it absolutely weird when someone knows CSS and finds Tailwind preferable. It's like finding out a carpenter loves Ikea.

Hell, I work for IKEA and I still prefer CSS.
Post reply on HN