Moving away from Tailwind, and learning to structure my CSS • Hacker News Board

Re: Moving away from Tailwind, and learning to structure my CSS

#251

Post by paulhebert » Sat, May 16, 2026, 9:47 PM UTC

flossly wrote: post #8

TonyAlicea10 wrote: post #3

> I got curious about what writing more semantic HTML would feel like. I've been teaching semantic HTML / accessible markup for a long time, and have worked extensively on sites and apps designed for screen readers. The biggest problem with Tailwind is that it inverts the order that you should be thinking about HTML and CSS. HTML is marking up the meaning of the document. You should start there. Then style with CSS.…

While I agree I do think there's some "aspiration of purity/correctness" in your approach that I've long let go of. I look at the royal mess that is HTML/CSS/JS as a necessary evil, required when we want to target browsers. To me it's "just the presentation layer". In my work I put a lot more emphasis on correctness in the db schema, or business logic in the backend. When it comes to the messy presentation layer I pr…

You don’t think it’s valuable taking time to improve the interaction layer that all your users interact with your app through?

Re: Moving away from Tailwind, and learning to structure my CSS

#252

Post by paulhebert » Sat, May 16, 2026, 9:51 PM UTC

ncphillips wrote: post #78

spiderfarmer wrote: post #44

Earlier quoted context omitted.

As someone who wrote CSS for 20 years and who was against using Tailwind because of “principles” I must say that Tailwind is just awesome. Every minute spent trying to make sense of the structure past you or your colleagues came up with is a minute that could be spent on something more important. Every time someone says that Tailwind sucks, it’s like hearing the old me speak.

Same here. It’s super weird take to me now. Maybe if you’re just writing plain HTML and CSS tailwind would be worse, but assuming there’s a component system you’re going to be just fine. The cascade of CSS is such a foot gun. Localized styles work great and tailwind abstracts away hardcoded values with relative ones

I prefer writing plain CSS over Tailwind

But I get component-scoped CSS (via Vue) and use custom props to abstract away hardcoded values

Tailwind isn’t the only option for those features

Re: Moving away from Tailwind, and learning to structure my CSS

#253

Post by dimgl » Sat, May 16, 2026, 9:56 PM UTC

danaw wrote: post #54

TonyAlicea10 wrote: post #3

> I got curious about what writing more semantic HTML would feel like. I've been teaching semantic HTML / accessible markup for a long time, and have worked extensively on sites and apps designed for screen readers. The biggest problem with Tailwind is that it inverts the order that you should be thinking about HTML and CSS. HTML is marking up the meaning of the document. You should start there. Then style with CSS.…

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled…

> you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps

+1

Re: Moving away from Tailwind, and learning to structure my CSS

#254

Post by rtpg » Sat, May 16, 2026, 9:56 PM UTC

xigoi wrote: post #147

codethief wrote: post #124

Earlier quoted context omitted.

Global styles are like global state in software: They're best avoided.

Global state is bad because it’s mutable. Global styles are not mutable.

Global styling done messily can override local styling. It’s the hardest kind of problem to reason about!

I do think that stuff like bootstrap is generally good at avoiding this but it only takes a handful of improperly scoped high level CSS rules to cause awkward hard-to-fix pain much later on.

Re: Moving away from Tailwind, and learning to structure my CSS

#255

Post by troupo » Sat, May 16, 2026, 10:00 PM UTC

xigoi wrote: post #223

troupo wrote: post #201

Earlier quoted context omitted.

True! And Mozilla is one of the good guys. What I should've said in my hastily written comment should have been: "and other implementations of the same (or other) functionality isn't divs and spans?" I think my only true criticisms for Tailwind example would be: - should've probably used h2/h3 for card titles. Though this is dependent on where and how the card is used - should've done more with the meta (number / dat…

> HTML doesn't have a card element. I feel like this is a bad example because “card” is a presentation thing, not a content thing. On a social media site, you can have cards with submissions, in which case is the proper tag – and “card” is just a way to style the submission, so it deserves to be a class.

> I feel like this is a bad example because “card” is a presentation thing, not a content thing.

It is both, and herein lies the problem with HTML and the quest for purity. The content you display in a card differs from the content you display in a different context.

The world is filled with "bad examples".

> so it deserves to be a class.

I guess I haven't looked at docs since it was introduced many years ago [1]. Talk about "semantic" lol. The entire definition has been twisted and turned to be nearly indistinguishable from a element. TIL that "product card" is an "article" [2].

I guess the reason why people use divs is that they may look for a corresponding semantic element, but don't see it in the list, and don't look into technical details, so reach for a generic div.

Interestingly enough, best practice is (or was a couple of years ago) to actually use a card as a list element in a list, see: https://wpaccessibility.day/2024/sessions/how-to-design-and-...

[1] Originally, of course, they were always meant for texts that "could be published or syndicated separately if needed" https://www.w3.org/WAI/GL/wiki/Using_HTML5_article_element

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... while the spec still talks about mostly actual articles and text content: https://html.spec.whatwg.org/multipage/sections.html#the-art... HTML as text-only and text-centric markup is uniquely unsuited for... well, almost anything (even for most text use cases).

Re: Moving away from Tailwind, and learning to structure my CSS

#256

Post by ai_fry_ur_brain » Sat, May 16, 2026, 10:16 PM UTC

danaw wrote: post #54

TonyAlicea10 wrote: post #3

> I got curious about what writing more semantic HTML would feel like. I've been teaching semantic HTML / accessible markup for a long time, and have worked extensively on sites and apps designed for screen readers. The biggest problem with Tailwind is that it inverts the order that you should be thinking about HTML and CSS. HTML is marking up the meaning of the document. You should start there. Then style with CSS.…

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled…

Can you provide an example of well written components that use Tailwind? Genuinely curious to see what that looks like.

Re: Moving away from Tailwind, and learning to structure my CSS

#257

Post by 0x3f » Sat, May 16, 2026, 10:18 PM UTC

hparadiz wrote: post #188

0x3f wrote: post #148

Earlier quoted context omitted.

Picking subsets of customers to focus on is a totally standard part of running a startup or company in general, so this is not really news or any kind of threat. You might as well tell me the suburban moms are not going to buy my developer tool because I've personally slighted them with the branding. Why would I care? I made my decisions knowing this. In fact ditching low RoI customers is incredibly common and good s…

This is just admitting that your product is small and unimportant.

Hardly, I can trivially find Fortune 500 websites without accessibility.

Re: Moving away from Tailwind, and learning to structure my CSS

#258

Post by 0x3f » Sat, May 16, 2026, 10:28 PM UTC

esseph wrote: post #180

0x3f wrote: post #148

Earlier quoted context omitted.

Picking subsets of customers to focus on is a totally standard part of running a startup or company in general, so this is not really news or any kind of threat. You might as well tell me the suburban moms are not going to buy my developer tool because I've personally slighted them with the branding. Why would I care? I made my decisions knowing this. In fact ditching low RoI customers is incredibly common and good s…

I suspect as the years change and you continue to get older you will likely revisit this idea mentally. But you do you, boo

Ok well enjoy your thought-terminating cliches in the meantime

Re: Moving away from Tailwind, and learning to structure my CSS

#259

Post by christophilus » Sat, May 16, 2026, 10:33 PM UTC

alwillis wrote: post #135

danaw wrote: post #54

Earlier quoted context omitted.

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled…

> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex. > placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors In my opinion, it's the opposit…

With CSS names are global. You have to be careful not to accidentally create a class that conflicts with another one used elsewhere in a different context. You have to worry about whether modifying your class will have downstream effects on elements you weren’t intending to impact. It’s a giant pain. I’ve done it by hand for around 20 years before switching to Tailwind.

Can vanilla CSS be used for a complex app? Yes. But, it takes discipline, and I only have a limited amount of that. I’d rather spend my discipline budget on other things.

That said, nested selectors and CSS variables have gone a long way towards making the vanilla experience much more pleasant. I may have to give it a shot on a side project one of these days.

Re: Moving away from Tailwind, and learning to structure my CSS

#260

Post by jampekka » Sat, May 16, 2026, 10:48 PM UTC

ricw wrote: post #186

alwillis wrote: post #135

Earlier quoted context omitted.

> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex. > placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors In my opinion, it's the opposit…

I disagree with that conclusion. I see tailwind as a cleaner more succinct version of css that is much easier to manage and add features too. Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin. CSS is too detailed and too verbose. Frameworks like bootstrap are too high level and don’t give enough cont…

> Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin.

How does this happen? You can always override css values. Either by ordering, !important, inline or, to make very sure, with inline !important.