[diceduckmonk]

If you compare a given snapshot of code containing utility css vs well defined CSS, then yes, it looks worst.

The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt. Utility CSS contain redundancies (on the HTML side of things), but the rule of dumb is that you shouldn't refactor redundancies until you are absolutely sure what the unit of abstraction / isolation should be. In the case of prototype and fleshing out your designs, having a concise CSS stylesheet won't work, especially if you work with other people who are tunnel visioned on one specific scenario (a sort of tragedy of the commons) and not thinking hollistically as you would as an solo developer. We can think of that idealized, perfectly concise, stylesheet an "unstable saddle point" whereas utility CSS is not already at the saddle point but it does converge towards a stable one.

[nailer]

> The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt.

Interesting. That’s not been my experience. People tend to clean up as they go, eg if the design says we now need a thinner padding / gaps or a different colour blue, we change the variable, and if we spot cut and pastes we fix them.

It’s certainly much easier to refactor than visual classes mixed into HTML.

[_v7gu]

But tailwind also provides a way to change variables?

https://tailwindcss.com/docs/customizing-spacing

Better yet, it also forces people to use theme spacing sizes or making the use of custom unit very explicit (a [] in your class name)

[nailer]

Tailwind doesn’t force people to do anything more than using regular CSS does. Or any technology - it’s really difficult to change human behaviour with technology.

[Kiro]

What you describe is not representative of how CSS is maintained in most companies. You always end up in a situation where it's impossible to track down what styles affect what elements so you start overriding and duplicating because you're afraid to touch existing CSS.

[nicoburns]

How can it ever be impossible to track down styles? The browser dev tools will tel you exactly which styles apply to which element.

[kaba0]

Come on, do you honestly gonna tell people that just because a Turing-machine somehow managed to untangle that mess, it is humanly parsable? Most sites are not HN with like 3 lines of CSS, dev tools will list you like 10s of different rulesets that together determine the output — of course one can see what’s the end result, but now try changing some property that gets applied by multiple rules. That can get very difficult/impossible since you may not have control over every stylesheet.

[Kiro]

Nothing is impossible but it becomes hard because the element is styled through multiple cascades, and you need to track it down both ways. When changing a class or a style you need to know what elements that change affects, which will be hard to track down because of the same reasons.

[nailer]

Svelte, which is fairly mainstream these days looking at state of js, scopes your styles to the component.

So global styles are very rare and usually a bunch of branding variables these days.

Like a lot of bad solutions in tech, tailwind seems to exist as a workaround to the core issue of ‘still using react’.

[satvikpendem]

Similar to Vue then, looks like. For me, CSS modules or CSS-in-TS solves our scoping problems in React.

[nailer]

Yes exactly. If react included scoped styles out of the box conflicts would be rare and tailwind would be far less popular.

[antihero]

Not really, you have intellectually missed some of the key reasons for Tailwind and why it's popular.