Moving away from Tailwind, and learning to structure my CSS

https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/

by mpweiher • 2 months ago

698 393 2 months ago

villgax5• 2 months ago

Relying on React or Typscript in LLM era seems very stupid, just have the LLM setup whatever dom manipulation you want and have it write decent JS without slop. Far more offline compatible development almost negligible supply chain issues as well. At least ones you can control.

freedomben3• 2 months ago

This works great for small sites/apps, but really starts to fall apart if/when it gains complexity where React starts to make sense. I've tried a few times to "just use plain javascript" with the LLM and initial results are often much better, but if the site grows a bit too complex, the LLM starts making a lot of mistakes and it can be hard to reason about as a human and get it on the right track. That hasn't been the case with the React apps IME.

wakamoleguy• 2 months ago

What a strange take. LLMs produce plausibly correct output, which is exactly where plain JavaScript and DOM manipulation will result in a spaghetti mess.

Frameworks like React that add structure to the data flow, component encapsulation, and a huge repertoire of patterns to train on, plus Typescript for immediate compile-time feedback loops… those are what LLMs thrive on.

thekingshorses• 2 months ago

I agree, specially for simple apps. it's much easier to upgrade if you are not relying on 3rd party or NPM's. Don't have to worry about code injections.

I have these two https://reddit.premii.com and https://hn.premii.com/ both works without any changes. Reddit will stop working once they kill the apis but until then it will work.

jfengel• 2 months ago

Layout design issues are orthogonal to choice of language and framework. You can apply the article's approach to plain static pages and to SPAs.

I tend to work closer to the latter end and find that both React and Typescript are extremely helpful to make my code extensible and maintainable. YMMV.

villgax5• 2 months ago

We strayed away from god after jQuery

dwb2• 2 months ago

This makes no sense. LLMs and agents benefit from (good) abstraction as much as humans do.

villgax5• 2 months ago

Sure, just doesn't have to be npm or build dependent IMO

bel8• 2 months ago

React maybe (because there are alternatives).

But for mid/large projects, I find that TypeScript brings sanity to JavaScript.

I love some quick and dirty JS project. But after a certain project size I begin the see runtime errors like undefined, NaN, 'false/true' concatedted to URLs, and so on. TypeScript eliminates a ton of those.

cleaning• 2 months ago

I hope I never have to work with you.

villgax5• 2 months ago

get back to API calling whip noises

48terry4• 2 months ago

just have the LLM setup whatever dom manipulation you want and have it write decent JS without slop.

Hmm, yes, simply have the LLM write good with no mistakes.

Muromec• 2 months ago

Why write in rust if LLM can write assembler for any architecture?

villgax5• 2 months ago

That's what another HN post a few days away was saying too lol but about Python

TonyAlicea1014• 2 months ago

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. If you need extra elements for styling at that point, you might use a div or span (but you should ask yourself if there's something better first).

Tailwind instead pushes the dev into a CSS-first approach. You think about the Tailwind classes you want, and then throw yet-another-div into the DOM just to have an element to hang your classes on.

Tailwind makes you worse as a web developer from a skill standpoint, since part of your skill should be to produce future-proof readable HTML and CSS that it usable by all users and generally matches the HTML and CSS specs. But devs haven't cared about that for years, so it makes sense that Tailwind got so popular. It solved the "I'm building React components" approach to HTML and CSS authoring and codified div soup as a desirable outcome.

Tailwind clearly never cared about any of this. The opening example on Tailwind's website is nothing but divs and spans. It's proven to be a terrible education for new developers, and has contributed to the div soup that LLMs will output unless nudged and begged to do otherwise.

freedomben3• 2 months ago

You're not wrong, and I mostly agree with you. I die inside when I see the div soup that a lot of sites have become. However, I think there is value in being able to have the important parts of CSS merged into the HTML a bit. Where that line is, is certainly up for debate (and I don't have the answer), but I've found a lot of my tailwind sites are more readable to me than my pre-tailwind sites, often because I don't have to context-switch and open a different file to be able to reason about the styling on an element. For big stuff the second file can be nice, but there's a lot of style tweaking that is great to be able to do right there in the HTML. Tailwind does really lead you to ignore the css file though (or keep it highly minimal), which I agree is becoming an anti-pattern.

TonyAlicea1014• 2 months ago

The "open a different file" reasoning piece is a common pro-Tailwind statement and I do see the upsides.

I think that upside became more prevalent in the reusable components era, whereas previously CSS was targeting an entire HTML file (and thus the reasoning was more like SQL query than "this one element's styling").

With LLMs I think this upside is much smaller now though.

skydhash4• 2 months ago

It seems that everyone is forgetting the web inspector as a tool for designing web pages. You can tweak properties and styles in a live environment, and then transfer your preferences to the css files.

reaperducer5• 2 months ago

I don't have to context-switch and open a different file to be able to reason about the styling on an element

Unless you're coding on a VT100 terminal, you just put the HTML in one window and the CSS in another. Subdivide as necessary, or as your monitor space allows.

Heck, we were doing that back in 1989 on IBM PCs with MDA displays.

If your CSS is so out of control that you can't wrap your brain around it, it's time to refactor or split into individual CSS component files.

flossly3• 2 months ago

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 prefer to write a little as possible, while still ending up with somewhat maintainable code. And for this Tailwind fits the bill really well: LLMs write it very well, new devs understand it quick, and it's quite easy to read-back/adjust the code later.

I 100% agree a Tailwind project is not the best way for a new dev to learn HTML/CSS. But then I prefer the new dev to focus on great db schemas, intuitive APIs, test-able biz logic, etc. Fiddling with the mess that's HTML/CSS is not the place where I consider human attention is best spent on (or where developers pick up skills to become much better developers).

TonyAlicea1014• 2 months ago

This isn't about "purity/correctness" it's about the real experience of a blind person. Accessibility means caring about the HTML.

Your comment only mentions developers as the audience of HTML authoring, as opposed to users, which is a common attitude and the core problem with Tailwind.

paulhebert3• 2 months ago

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

vehemenz• 2 months ago

A few counterpoints:

Treating markup and styles separately is great, in principle, but you'll always need additional markup for certain things. We knew this going back to the early 2000s.

There is nothing about Tailwind itself that forces you to use divs and spans instead of the appropriate HTML tag.

Documents and interfaces are different. Tailwind makes a lot more sense for interfaces. You can use Tailwind for the interface and scoped HTML selectors for other content.

Tailwind is around 4x faster and has practically no overhead compared to writing a complex CSS codebase. Whatever you think of it, this is always a benefit in its corner.

efortis3• 2 months ago

Benchmarks?

spiderfarmer• 2 months ago

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.

hahn-kev• 2 months ago

I always feel like the distinction between interference and document is missing in these types of discussions. Often times they're as different as native vs web dev and if you don't realize that then you're arguing about totally different things and nothing will make sense.

TonyAlicea1014• 2 months ago

Folks in this thread keep conflating “forces to” and “ergonomically encourages”.

If a power tool is poorly designed it may not force me to hurt myself but if it makes it easier that’s a problem.

7bit• 2 months ago

Tailwind instead pushes the dev into a CSS-first approach. You think about the Tailwind classes you want, and then throw yet-another-div into the DOM just to have an element to hang your classes on.

I wholeheartedly disagree. That mindset is not caused by Tailwind, but by being ignorant.

You can perfectly create an HTML document with semantic meaning and the add Tailwind just as any other CSS framework or pure CSS to it.

And DIVs do not carry meaning, they are specifically to add functionality or styling, so you can throw in as many as you like. Using them abundantly isn't good style, but the way you make it sound that they're evil isn't good either.

TonyAlicea1014• 2 months ago

The HTML spec says divs are the element of last resort. This issue isn’t that they’re bad. The issue is they are reached for far too quickly.

Also if you think massive numbers of nested divs don’t have a performance impact in the DOM when reusable components are nested (because “styling”), you’re wrong.

uxcolumbo• 2 months ago

What's a good source to learn how to develop like this - to create HTML / CSS structure that's accessible?

EDIT: ignore. I can see you have some links in your profile. Will check it out.

reaperducer5• 2 months ago

HTML is marking up the meaning of the document. You should start there. Then style with CSS.

This is precisely how I do it.

Code that generates HTML. Once I can see all the content on the screen in some kind of Netscape Navigator 1.0 nightmare, then I go back and add styles to make it look pretty.

It's not hard. It just requires thought and planning.

(The best planning tool I've found is a pencil and grid paper, not the web design SaaS-of-the-moment. However, it's surprisingly hard to find good pencil sharpeners these days.)

antran22• 2 months ago

Tailwind instead pushes the dev into a CSS-first approach. You think about the Tailwind classes you want, and then throw yet-another-div into the DOM just to have an element to hang your classes on.

To be fair plopping a `div` everywhere started way before Tailwind. I blame React and the mess that is CSS in JS for this.

evilduck• 2 months ago

Divitis was a thing long before React came along. It was a common solution to styling problems even in the jQuery/Dojo days. Getting stuff to look similar across IE6 and FF before CSS3 relied heavily on divs.

ncphillips3• 2 months ago

It did for sure. And Tailwind absolutely doesn’t need to be done this way. I think this is a correlation-not-causation issue

mhitza• 2 months ago

Using tailwind doesn't lead to any inherent concession of accessibility. How do you come to that conclusion?

If I look at their component library, they also do the work of including aria attributes for you https://tailwindcss.com/plus/ui-blocks/marketing/sections/pr... (first exsmple with free code I've found).

If we're not talking landing pages, which are more like digital brochures, I always start with markup and then add css classes on top.

TonyAlicea1014• 2 months ago

Who said inherent. The design loop of “I need a div for my CSS class” is an ergonomic problem not a concession.

xigoi9• 2 months ago

If I look at their component library, they also do the work of including aria attributes for you

Using ARIA attributes instead of semantic elements is bad for accessibility.

danaw9• 2 months ago

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 on Tailwind for the last few years is precisely because it enables me to build more robust application styling.

tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors affecting styles unintentionally and really aids in debugging. jumping into codebases with bespoke css frameworks is always more complex and fragile than a tailwind codebase for anything but the most simple sites/apps

add to that the ability to have consistent type, color and sizing scales, reduced bundle sizes, consistency for any developer who knows tailwind and a very robust ecosystem (and thus llms are very familiar with it) and tailwind is a really excellent choice for a lot of teams

tailwind is like most tools; it can be used well or poorly depending on who is using it

superfrank2• 2 months ago

nothing about tailwind forces you to build inaccessible or "div soup" apps

Totally agree. I feel like this was more a by product of React. Not that React forced this either, but it felt like the rise in both went hand in hand for some reason.

While I think it's true that none of the current top FE technologies force the div soup, they don't discourage it either. It would be nice if what ever FE technologies catch on next did try to encourage better practices around things like accessibility. Make the path of least semantic HTML the path of least resistance and allow people to fall into the pit of success, ya know?

TonyAlicea1014• 2 months ago

If a tool’s design makes it easy to cut myself, the response is not “people have been cutting themselves for years”.

There is such a thing as the ergonomics of the tool. Yes div soup has been around a long time. But also yes, Tailwind makes the wrong approach the easy one.

It’s ergonomics encourage adding div elements to support styles. It’s the core design loop.

You’re conflating “forces to” and “ergonomically encouraged”.

ghurtado2• 2 months ago

can tailwind be used poorly? absolutely. but that's true of any tool

Can tailwind be a useful CSS framework? Absolutely, but that can be said of any of them.

Which is precisely why it makes sense to point out it's unique flaws, so that people can make an informed decision as to what works best for them.

If you have some unique feature to tailwind that you think makes it better than the rest, you should share that.

Everything you have listed is also accomplished by all the other CSS frameworks, so it almost sounds like tailwind is simply the main one you have experience with.

arealaccount2• 2 months ago

I’ve mentioned this before here, but originally I was against Tailwind because it breaks the Cascading part of CSS, however I think a lot of websites lately work better with “locally scoped” styles as there are just so many different components that many things just dont need to follow a global style sheet. So now I usually reach for tailwind first, unless is a relatively simple vanilla html site

alwillis6• 2 months ago

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 opposite. Besides the obvious violation of DRY and the separation of concerns, inline CSS can't be cached and it creates a lot of noise when using dev tools for debugging. It actually increases cognitive load because you have to account for CSS in two different locations.

Lots of people use Tailwind because they don't want to deal with the cascade, usually because they never learned it properly. Sure, back in the day, the web platform didn't provide much built-in support for addressing side effects of the cascade, but now we have @layer and @scope to control the cascade.

Tailwind uses a remnant of '90s web development (inline CSS) and built an entire framework around it. I get why it appeals to some people: it lets you use CSS while not requiring an understanding of how CSS works, beyond its most basic concepts.

zelphirkalt5• 2 months ago

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 on Tailwind for the last few years is precisely because it enables me to build more robust application styling.

I think herein lies at least part of the problem of the web these days: Most websites don't need to be applications, and are needlessly made to be applications, often even SPAs instead of simply being mostly informational pages, in turn putting different requirements for styling onto the project.

[...] jumping into codebases with bespoke css frameworks is always more complex and fragile than a tailwind codebase for anything but the most simple sites/apps

There is no need for frameworks. Well structured and scoped CSS can handle it all.

add to that the ability to have consistent type, color and sizing scales, reduced bundle sizes, consistency for any developer who knows tailwind

What if not that does CSS already offer? I don't see how normal CSS does not already do that. No additional thingamabob needed.

very robust ecosystem (and thus llms are very familiar with it) and tailwind is a really excellent choice for a lot of teams

Tons of ready-made stylesheets out there to use for teams. What more of an "ecosystem" do I need to style a web page? Why do I need an ecosystem? Is it not rather a tailwind self-induced need?

kcrwfrd_• 2 months ago

I’ve also been writing CSS professionally for nearly 20 years and am a big fan of tailwind.

The ergonomics in my day to day work are quite nice. To me, the better boundary of abstraction shifted to components, rather than the html/css/js “separation of concerns” that some of the older folks still like to parrot.

However, take a look at the markup and styling for the https://maps.apple.com/ web property.

I can’t deny that it’s quite beautiful and easy to holistically understand. Especially when it comes to the responsive styling—which is when I tend to find tailwind most awkward.

It’s my favorite example of “traditional” CSS structure in recent memory that has given me some pause when it comes to Tailwind.

pwdisswordfishq• 2 months ago

nothing about tailwind forces you to build inaccessible or "div soup" apps

https://en.wikipedia.org/wiki/The_purpose_of_a_system_is_wha...

So what if it does not "force" you?

The_President3• 2 months ago

Proclaiming professional advice on the internet should compel you to bother using proper caps and punctuation. To your point - you are addressing the symptoms of bad understanding of CSS and it's relationship to the DOM. While tailwinds is a useful tool, it's not particularly special.

dimgl• 2 months ago

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

ai_fry_ur_brain• 2 months ago

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

eager_learner2• 2 months ago

i am no pro-- just a lurker wanting to learn -- and comments like danaw's are the reason my time on HN is not wasted. Thank you.

espadrine• 2 months ago

Could you link to a project that you consider the best Tailwind use you know?

I have a bias against Tailwind, admittedly because I saw some vibecoded Tailwind where each class was essentially equivalent to style="font-size: 4em; background-color: grey; display: flex;", all of which was repeated for each header.

But that could be my bias; perhaps the right way to use is is DRY.

atoav2• 2 months ago

The first example on the official tailwind website right now starts like this:

  <div class="flex flex-col items-center p-7 rounded-2xl">...</div>

The problem with tailwind is that semantic HTML should be entirely free of styling decisions in the ideal case. That also goes for styling classes like flex flex-col etc.

The way I would do it is to give the HTML some semantic meaning:

  <section class="info-for-nerds">...</section>

We can then decide how to treat section.info-for-nerds. Someone who reads the HTML immediately knows that this section is the bit that gives slightly too much information for nerds. That is what semantic means. The class adds meaning in a semantic sense, that helps to interpret the purpose of the element.

Then in CSS you would just style the semantic.info-for-nerds text fully with flex, flex-col, the whole shabang. If there are other info boxes that share style adding a general info-box class is probably a good idea. Again, this is semantic. I don't say red-box. I say what the box is intended to mean, not how it looks.

If you need the Infobox to look different in another context (or want to be sure your selector doesn't leak) you use the cascading bit of the language;

  .page-article>article>section.info-for-nerds { ... }
  
  .page-catalog>section.summary>section.info-for-nerds { ... }

Notice btw. that I also prefer to use semantic HTML elements like section, article, main, aside over generic ones like div. Using these well may even mean you don't need any classes at all. If you have three nested divs classes are the only way to k ow which one is the article. If you have main containing article containing section, that may literally be all the info you need.

xtiansimon• 2 months ago

“…nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. […] tailwind is like most tools; it can be used well or poorly depending on who is using it.”

Hmm. Your reply refutes the div-soup accusation, but doesn’t provide any explanation.

troupo9• 2 months ago

HTML is marking up the meaning of the document. You should start there. Then style with CSS. If you need extra elements for styling at that point, you might use a div or span (but you should ask yourself if there's something better first).
Tailwind instead pushes the dev into a CSS-first approach.

You're putting the cart before the horse. Or forgetting either the cart or the horse. Tailwind doesn't force anything. And "semantic HTML" or "semantic CSS" are not really a thing, and have as much bearing on how many divs a page has, as Tailwind.

And the reason is simple: there's literally nothing else in HTML than divs and spans. The amount of usable primitives is absolutely laughable, and trying to combine them in any useful manner results in as much soup with Tailwind as without Tailwind.

since part of your skill should be to produce future-proof readable HTML and CSS that it usable by all users and generally matches the HTML and CSS specs.

Which part of Tailwind isn't readable, isn't future-proof, or doesn't match HTML and CSS specs?

How is "px-4" none of that, but ".ytp-big-mode.ytp-cards-teaser-dismissible .ytp-cards-teaser-label" (Youtube's CSS) or ".swg-button-v2-light[disabled]" (Washington Post) or "legacy-popover--arrow-end-bottom:after" (Spotify) are?

The opening example on Tailwind's website is nothing but divs and spans.

Oh no! And what are the opening examples on any of the "proper pure-as-god-intended CSS" sites?

xigoi9• 2 months ago

Oh no! And what are the opening examples on any of the "proper pure-as-god-intended CSS" sites?

The first example on https://developer.mozilla.org/en-US/docs/Learn_web_developme...:

  <p>Instructions for life:</p>

  <ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Repeat</li>
  </ul>

  p {
    font-family: sans-serif;
    color: red;
  }

  li {
    background-color: greenyellow;
    border: 1px solid black;
    margin-bottom: 5px;
  }

No divs and spans in sight.

mgraczyk• 2 months ago

CSS is badly designed and uses a confusing, separate DSL with arbitrary rules designed before the Internet was widely used, before web apps existed, before smartphones etc

It's trash and throwing it out is good. Not learning it is good. Tailwind is a solution to a real problem.

More importantly, AI is good at it already and it's unlikely humans will need to understand HTML/CSS at all within a year or two. There's no reason to spend time learning how the gears work, just put the cover back on

ramesh31• 2 months ago

It's trash and throwing it out is good. Not learning it is good. Tailwind is a solution to a real problem.

Yup. Spent a decade of my career writing CSS every day, I was what you would call a "guru" and have written easily hundreds of thousands of lines of it over the years. Haven't touched a class or a stylesheet in nearly a year now, and probably never will again. Good riddance.

odnckwmxkwdj• 2 months ago

“CSS is bad” Why? “Because reasons.” Care to explain? “No need to learn it anymore, my AI can do it for me” Okay, but why is it bad to learn it “Reasons”

Uh… what?

BobbyTables2• 2 months ago

I find your comment quite refreshing.

25 years ago, I was appalled how Microsoft Frontpage could transform a very simple word document (with little formatting) into an utterly indecipherable mess of HTML that rendered correctly.

With very simple transformations, I could paste the text of the document into notepad and add just a few heading tags for the same rendered result but a much more understandable source.

CSS had a lot of promise for simplifying the HTML content, but the world tried its hardest to prevent that.

Now we have multi-megabyte monsters for simple webpages (before even counting graphics).

gofreddygo• 2 months ago

I agree with the criticism of tailwind. IMO any good criticism warrants at least an opinion on what should be done instead or some corrective or remedial patterns.

there is a reason why tailwind got as popular as it is today. And it only highlights the gaps in either what HTML and CSS provide for the task at hand or the difficulty in that approach. This must not be lost in any criticism.

another observation is none of technical user interface decisions or discussion emphasis on the tree data structure that is inherent to every major user interface rendering mechanism relevant today. there are inherent benefits and drawbacks of it being a tree structure that neither of the developers nor the framework leverage. when thought of as a tree, it benefits from adding certain constraints and naming conventions that allow more artistic expression using just HTML and CSS that I have not seen tailwind or any other framework encourage

alwillis6• 2 months ago

It's unfortunate Inverted Triangle CSS (ITCSS) isn't more popular. Instead of resisting the cascade, it embraces it and makes it work for the developer.

The summary: write your CSS in specificity order [1]:

    /scss/
    ├── 1-settings.         <- global settings
    ├── 2-design-tokens     <- fonts, colors, spacing, etc.
    ├── 3-tools             <- Sass mixing, CSS functions, etc.      
    ├── 4-generic           <- reset, box sizing, normalize, etc.
    ├── 5-elements          <- basic styles: headlines, buttons, links
    ├── 6-skeleton          <- layout grids, etc.
    ├── 7-components        <- cards, carousels, etc.
    ├── 8-utilities         <- utility and helper classes
    ├── _shame.scss         <- hacks to be fixed later    
    └── main.scss

ITCSS basically does away with specificity wars in a CSS codebase. Usually the only place !important is the utility layer.

[1] https://matthiasott.com/notes/how-i-structure-my-css

infamia• 2 months ago

This is brilliant, I was not aware of ITCSS. Thank you for sharing! The link you shared fits my brain a lot better than pure BEM/CUBE, which works but always felt weird and uncertain to my style. Sprinkling a bit of BEM on top of ITCSS feels just right. shame.scss is the snarky cherry on top. Thanks again, you have enlightened at least on person today! :)

funksta• 2 months ago

Aren't Cascade Layers [1] a more reliable, native solution to the specificity problem? In 2026, why not lean on them instead of source order?

[1] https://developer.mozilla.org/en-US/docs/Learn_web_developme...

SkiFire13• 2 months ago

HTML is marking up the meaning of the document. You should start there. Then style with CSS. If you need extra elements for styling at that point, you might use a div or span.

IMO this is the fundamental problem with HTML and CSS. You'll always have some part of the styling in the HTML due to needing extra divs and spans. At that point splitting the styling outside into the CSS splits your attention and Tailwind "solves" that by moving everything back into HTML.

Note that I don't like Tailwind, but I would rather have a way of styling that does not need to rely on the existance of extra divs and spans to work.

srcreigh2• 2 months ago

Which semantic element(s) would you use to build the example from the Tailwind website?

mcv3• 2 months ago

I agree. I don't really like Tailwind, nor similar CSS frameworks. The whole idea was to separate styling from HTML, and Tailwind is putting it back into HTML through the backdoor. It's just a way to do styling from your HTML without having to touch the CSS, by inserting styling info in your HTML. That's exactly what we were trying to move away from.

aleksiy1235• 2 months ago

I think this assertion is where most of the conflict comes from.

There is a fair amount of people that disagree with the premise that it should be separated in that way (Including me).

I personally like this essay by the author of htmx on the topic

https://htmx.org/essays/locality-of-behaviour/

Also just better composition imo.

Practically I think this means components of scoped css, html, js.

People never seem to have the same complaint about mixing or separating app code and sql in the same way?

isleyaardvark4• 2 months ago

This is the misconception that has caused so many problems over the years, problems that the Tailwind approach solves.

There was never any separation of concerns within the HTML code, the class="" property is in the HTML and that is the styling info. Devs took the idea of separation of concerns of content, presentation, and behavior as separation of technologies: HTML, CSS, and JS, which is not the same. So they tended to think, "oh no, with classes I've got presentation code in my content (HTML) and I need to put it all in my CSS." But HTML is not content, it contains content. And all the separation of concerns is done with how the HTML is written.

For example take this code <h2 class="h2" data-index="0">Bleh!</h2>

That has separation of concerns. The content is Bleh!, the content semantics are h2, the styling is all in the class, and the data-index is used only as a hook for javascript. Violating separation of concerns would involve using those properties for multiple concerns. Particularly the h2 class="h2" part. It looks a bit silly at first glance, particularly if you have a bunch of <h1 class="h1"> and <h3 class="h3">'s in the codebase. But that has proper separation of concerns, and I have many times run into cases where I want an <h1 class="h2"> or <h2 class="h1">, and in those cases, because I have proper separation of concerns, all I have to do is change the actual content layer to whatever is appropriate without worrying about the presentation layer changing because someone put an h2 { font-size: 1.6rem; } in the css.

The only difference between the old-school approach and the Tailwind approach is the API between the HTML file and the CSS. The old-school approach tends toward terrible abstractions because devs are trying to code the presentation for an element while feeling they need to describe the presentation in as few terms as possible, because they think that amount of characters is separation of content. Tailwind takes the approach that the class property is the presentation layer and you can use your words to describe it clearly.

I'd add that what I've seen with the older approach almost always leads to much more co-mingling of concerns (maybe because those devs get so focused on "all style should be in the CSS"). That's when I see things like ul > li { padding: 1rem; }, which is fine until you decide to change it to an ol. Or even .foo > .bar { ... }, which is dependent on the structure of the content.

Yes, Tailwind is ugly as sin but it's effective.

dalemhurley• 2 months ago

That has nothing today do with TailwindCSS, we have been having the exact same thing since 1999.

therealpygon• 2 months ago

It does make that easier for people to choose to do, but I would argue that it shouldn’t be held against tailwind that people do this. Also, sorry, but I’m doubtful that when using CSS that no markup would be changed to better accommodate the final layout…just like tailwind?

If the first tool in your tool chest is to change the markup, then it doesn’t matter which method of styling you apply. If your first goal is clean markup and accessibility…then It doesn’t matter which method of styling you apply.

wellpast• 2 months ago

HTML is marking up the meaning of the document.

Is this true at all anymore, except for SEO optimized sites/content?

For apps, it’s all layout, isn’t it — and HTML, JS, CSS have all evolved heavily to support UI-first, haven’t they?

mb2100• 2 months ago

Yeah, while you certainly can write semantic HTML with Tailwind, it absolutely doesn't encourage it. It's funny how Tailwind is conceptually going back to inline styles.

But sure, if you have <Title>, <Header> and <Button> components etc. instead of using HTML elements <h1>, <header>, <button> etc. directly, then why not stuff the CSS into the components as well? It all depends on whether you prefer to use components, HTML elements or a combination as your favourite abstraction.[0]

[0] https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-...

KolmogorovComp• 2 months ago

For me Svelte and LLM completely removed my need for Tailwind. Turns out I was using it primarily to avoid CSS collision, and (to me) more logical syntax, rather than the self-imposed constraints.

esafak• 2 months ago

Why did Svelte affect your stance towards Tailwind?

eximius• 2 months ago

Presumably because you just put the styles in the component.

brikym• 2 months ago

Svelte namespaces styles to the component and also has some lint checks for unused selectors.

stephbook• 2 months ago

I'm lucky to have learned the web with Angular 2.x

It scopes CSS to components by default, and keeps HTML, CSS and JavaScript seperate.

CharlieDigital• 2 months ago

Vue single-file components (SFC[0]) still works this way.

    <template>
    <!-- Largely just HTML -->
    </template>

    <script setup lang="ts">
    // JS/TS as you would expect
    </script>

    <style scoped>
    /* Component scoped styles here */
    </style>

Very clean, easy to understand, and (as someone who started hand writing DHTML) it still feels very much like DHTML with more convenience and modern affordances.

[0] Vue SFC docs: https://vuejs.org/guide/scaling-up/sfc.html

pjmlp• 2 months ago

Tailwind crazy adoption is something that makes me happy to nowadays be doing mainly boring stuff in distributed cloud systems and agents, instead of WebUIs.

BoredPositron• 2 months ago

I am so happy that the only time I have to touch css anymore is for simple internal tools and pico is usually enough for them.

anydigital3• 2 months ago

+1 for Pico CSS! It’s fantastic.

We actually loved it so much that we've taken over maintenance for a fork here: https://github.com/anyblades/pico

neya• 2 months ago

So, we're just going a full circle back now. Interesting.

4lx87• 2 months ago

Hope so. I’d like to be able to read the HTML templates again.

eYrKEC2• 2 months ago

_tailwind_ was the full circle. We had individual controls. We went to semantic controls, then back to individual controls a la tailwind.

coffeefirst• 2 months ago

Yep. Every 7 years.

JimDabell2• 2 months ago

One thing that has always struck me about Tailwind is that practically every argument its proponents use more or less boils down to “I never learnt CSS beyond a junior level”. It’s super common to hear Tailwind advocates say things like “Without Tailwind, we would just have one big disorganised CSS file that always grows uncontrollably and ends up with loads of obsolete stuff in it and !important everywhere! Tailwind is so much better!”.

CSS is a skill just like any other technical skill. If all you do is learn the bare minimum so you can bodge things until you get something that looks right, then your ambitions are going to outpace your ability to keep things organised very quickly.

chistev• 2 months ago

Isn't Tailwind easy to understand when you look at the codebase, rather than putting in more effort to learn a pure CSS codebase? Isn't that part of the argument of Tailwind being easier to scale?

JimDabell2• 2 months ago

Isn't Tailwind easy to understand when you look at the codebase, rather than putting in more effort to learn a pure CSS codebase?

No, I don’t think that’s the case at all.

reaperducer5• 2 months ago

Isn't that part of the argument of Tailwind being easier to scale?

I think that was true at the beginning. But Tailwind is quickly approaching the multi-headed hydra it was trying to replace.

timr8• 2 months ago

It's worse than that; the common arguments for Tailwind literally derive from total ignorance of how CSS is made to work, and a disposal of guidelines that developers would worship in any other context (i.e. Don't Repeat Yourself).

It's really frustrating to be talking with someone about Tailwind and CSS, and realize that not only do they not know what "cascading" means, they never even considered the concept might be useful in the context of a stylesheet.

u_fucking_dork3• 2 months ago

The common arguments against Tailwind usually derive from total ignorance of working with CSS on large scale projects with many team members.

And when this is pointed out you’ll usually get replies that just hand wave it away as not a problem, as if things like BEM were invented for no reason.

coolThingsFirst• 2 months ago

And the cascading thing is a nightmare even after years.

Whenever i have written CSS/TailwindCSS which was unproblematic to extend it was when i literally switch thinking to use least amount of properties and let the page flow.

Whenever i see tons of css i know it’s brittle and will cause hours of wasted time down the line to fix something which already should have been fixed.

pverheggen4• 2 months ago

Tailwind, JS-in-CSS, and the like have become popular because they work well with the modern corporate UX workflow. A Figma component has a certain set of styles, you apply those same styles to the corresponding React component.

And none of this really violates DRY, your unit of reuse has shifted from a CSS class to a framework component. There's nothing precluding you from using an approach like DaisyUI if stock Tailwind has too much repetition for your taste.

jim334422• 2 months ago

I'm fine with just the "cascading styles" part of CSS. The thing is it's also sizing and placement of elements in the webpage. Sometimes that's easy, other times there are 10 different ways to accomplish something that all feel hacky.

thisismyopinion2• 2 months ago

DRY can be implemented using tailwind if you know how to. You can abuse tailwind and have no structure which I've seen even seniors do.

I've worked with CSS since 2001. Understood the CSS rendering engine in Mozilla like the matrix and written an absolute ton of cascading CSS using various methods and frameworks. All my stuff is now tailwind and it's pure bliss.

bdcravens• 2 months ago

Isn't the same true of those who use a library that wraps SQL?

chaosharmonic3• 2 months ago

I would think manipulating CSS through user input is both less common as an application pattern and less critical as an attack surface.

fg1373• 2 months ago

I think there is a wide spectrum of "wrapping SQL", and very likely not because someone doesn't know SQL well. Depending on the use case, it can be just the right solution or overkill.

Tailwind, on the other hand, attempts to address a different set of problems, but I am not getting into that here -- other comments have summarized it well.

throwawaysleep• 2 months ago

That’s the value of tailwind. You can just skip learning CSS and still get a good result. The benefit to learning it is marginal.

fg1373• 2 months ago

You can just skip learning CSS

It works until doesn't, and you'll have to figure out what's going on with your code.

chaosharmonic3• 2 months ago

Personally, I'm not sure from my own dives into it that I'd still insist on bare CSS in a professional codebase any more than I'd insist on plain DOM manipulation. And I do at least see Tailwind classes as being a little less of a DSL than other, similar tools. But while I'm not going to be a purist about it at a workplace, I both agree with you and have noticed a layer even beyond your point: that overreliance on these things leads to not learning HTML beyond a junior level.

It gets really easy to lean on class-based CSS and use a `<div>` for everything instead of ever learning what a semantic element is.

And that contributes to other bad habits, like writing a bunch of JavaScript to define behavior that could just be natively handled by your browser.

A weird personal irony is that because no employer has ever asked me to directly write CSS, what's actually made me better at CSS is JavaScript -- namely that my understanding of selector logic has improved a lot after picking up Web scraping.

chaosharmonic3• 2 months ago

I should probably note a detail I left out here: I myself care a lot about standards, and simply am stating that I wouldn't push teams around me to suddenly drop Tailwind even if I personally would rather not have to rely on things like it everywhere. Less that my opinion goes away and more that I don't presume it's the only valid option at scale.

But in my personal projects, I myself have just stopped using libraries entirely for styling.

romanhn• 2 months ago

The more experienced Tailwind proponents probably have better things to do than get dragged into yet another online flamewar :) I've done tons of CSS since the 90s before looking into Tailwind. After it clicked, I've mostly tried to avoid raw CSS. In a sense, you exchange one mess for another. Personally, I'd rather deal with a localized class soup than trying to make sense of overlapping, often contradictory, cascades of styles across multiple files. Both can be implemented cleanly, but I'd much rather clean up a Tailwind mess than a CSS one. And I find the development process much more enjoyable overall.

codethief6• 2 months ago

Personally, I'd rather deal with a localized class soup than trying to make sense of overlapping, often contradictory, cascades of styles across multiple files.

That seems like a false dichotomy. I'm a huge fan of locality (both in software engineering and in physis) but you can also "localize" your styles by scoping them appropriately. (Modern frontend frameworks typically do that automatically for you at the component level.) There is no need to use Tailwind for that.

Merad• 2 months ago

You aren't wrong, but the _overwhelming_ majority of "full stack" devs I've worked with only know CSS at the most basic level and have little interest in learning it in depth. I myself have been programming for more than 20 years, doing web dev for almost 15, and I can't find the motivation to learn it well. There are too many technical skills to keep up with and CSS is pretty low down on my priority list. I would prefer to rely on specialists who are experts but companies aren't willing to hire dedicated front end devs.

jim334422• 2 months ago

This is where I'm at. React makes sense to me in ways that plain CSS doesn't. I've learned about 15 programming languages by now, each time out of necessity, but CSS isn't one of them.

fg1373• 2 months ago

Your comment is getting downvotes, not necessarily because you are wrong, but 1) CSS is indeed hard, complex and often confusing, which is partly why Tailwind exists in the first place 2) your comment points out some inconvenient facts, and people don't like that

stephen• 2 months ago

"beyond a junior level" -- I doubt this will change your mind, but this post is from the author of Tachyons, a "pre-Tailwinds" competitor that didn't get the same traction:

https://mrmrs.cc/writing/scalable-css/

And the tldr is that he downloaded and read the CSS for several major websites at the time (post is from 2016) and they were all hodge-podge of terribleness.

Maybe all the devs writing that CSS were junior, but imo it's more than CSS just doesn't have the abstractions to match the level of OCD/bespokeness that designers spec into every Figma -- move this box by _this_ much / _that_ much / etc.

halapro• 2 months ago

I'm a big hater of Tailwind but also know that most CSS out there is an absolutely clusterf of outdated rules and !important wars. There's no winning when some dude jumps into the codebase and fixes a bug by adding margin-right to "p"

CSS linters never really picked up steam and even with them, what's lintable is quite limited.

eviks• 2 months ago

Do you have an actual list of arguments with the steps you take to boil them down to ignorance? CSS is a design system, as like any system it can be poorly designed. Poorly designed systems require more effort to operate, and you can even call that "skills", but that just ignores the core issue of comparing design of those systems

bryanhogan3• 2 months ago

I have been writing a "clean" web development guide focusing on writing HTML and CSS that scales well: https://webdev.bryanhogan.com/

Maybe it's useful for people here. I don't use Tailwind or similar for styling, just CSS with modern frameworks like Astro or Svelte.

For every project I have the following CSS files:

- reset.css

- var.css

- global.css

- util.css

Other styling is scoped to that specific component or layout.

aejm• 2 months ago

Using a JavaScript framework kind of defeats the whole purpose doesn’t it?

hstaab• 2 months ago

css modules with react are really nice to work with. Plain css scoped to a component. The two arnt always at odds

bryanhogan3• 2 months ago

Why do you think so?

floydnoel• 2 months ago

Sounds like a home made Tailwind of your own

bryanhogan3• 2 months ago

Well Tailwind CSS is a CSS framework, and I'm writing CSS.

What Tailwind does is go fully into inline styles though. But I don't think that's an efficient approach, you also break a few other Clean Code principles along the way.

I do have some classes I sometimes apply inline, which are defined in the util.css, but the majority of styling is not done this way.

hit8run2• 2 months ago

Thats why I maintain the successor to tachyons: https://tachyonsneo.com No build pipeline. Resort to CSS when utilites make no sense. No lock in.

keybits• 2 months ago

Can you clarify how this relates to Tachyons - do all Tachyons features work? Or is it a subset of Tachyons?

hit8run2• 2 months ago

It's just a rebuilt drop-in replacement stylesheet compatible to the built version of tachhyons 4.12 but using css variables (so when you need to write custom css you can use its tokens) and it has support for grid plus a few more modern utilities.

Building an application you use this as your utility layer that gets you 80% and for the rest you use an application specific custom css to write the parts where css is the best.

NetOpWibby• 2 months ago

Nature is healing

zamalek• 2 months ago

What I don't get about tailwind is: why not just use the style attribute at the point?

0x3f8• 2 months ago

It's much more verbose and can't do everything Tailwind can anyway.

E.g. how do you style a child on parent hover with the style attribute?

thiht8• 2 months ago

With Tailwind:

    <button class="bg-blue-600 text-white px-4 py-2 rounded">

With style:

    <button style="background-color: var(--color-blue-600); color: white; padding: 8px 16px; border-radius: 4px; border: none;">

Now more interestingly, Tailwind with hover and focus styles:

    <button class="bg-blue-600 hover:bg-blue-500 active:bg-blue-700
      text-white px-4 py-2 rounded transition-colors
      focus:outline-none focus:ring-2 focus:ring-blue-400">

That’s not possible with the style attribute.

Even more interesting with Tailwind, a div with dark mode and responsive styles:

    <div class="
      bg-white dark:bg-zinc-900
      p-4 md:p-8
      rounded-xl
      shadow-sm dark:shadow-none
      border border-zinc-200 dark:border-zinc-700
    ">

That’s not possible either with the style attribute.

Now your first instinct might be to "that’s unreadable", but keep in mind HOW you actually read and write this code. You’re not actually reading it to understand what it does like you do with iterative code. You see how the browser renders it, and you just adapt the code. Tailwind code is mostly write-only and maintained by viewing what the component looks like. This code doesn’t need to be reusable either, the whole component needs to be. The Tailwind code inside is unique.

akersten• 2 months ago

Now your first instinct might be to "that’s unreadable", but keep in mind HOW you actually read and write this code. You’re not actually reading it to understand what it does like you do with iterative code. You see how the browser renders it, and you just adapt the code. Tailwind code is mostly write-only and maintained by viewing what the component looks like. This code doesn’t need to be reusable either, the whole component needs to be. The Tailwind code inside is unique.

I think this helped me finally understand the chasm between tailwind proponents and me. I just don't think I'll ever be part of the "keep painting each room a slightly different shade until it looks right" camp, when there's the "you can buy all the same color paint ahead of time, and even have some left over for the next five rooms you build" option right there.

Yeah, tailwind as write-only code definitely tracks. I guess some people like that. Not my bag though.

isleyaardvark4• 2 months ago

Tailwind code is mostly write-only and maintained by viewing what the component looks like.

I’d add that almost all code is like that, if you mean you only write it once and only look at it again if you need to make a change. And with Tailwind you generally only need to look at the one component, instead of having to go to a separate CSS file to look, and then look through the codebase to see if that code is used anywhere else.

Polarity• 2 months ago

oh is this stupid hype of defining design in html with a random framework finally over? thank god!

thiht8• 2 months ago

Can we stop with this kind of trash opinion? Do you genuinely believe people use Tailwind because they don’t know any better? I understand why many people have a visceral reaction against Tailwind when learning about it for the first time, but when you actually use it, you really can understand why some of the "anti-pattern" stuff you learned about CSS doesn’t really apply with Tailwind.

grzes• 2 months ago

tailwind is an anti-pattern that breaks separation of concerns rule. i'm amazed how it became so popular.

thiht8• 2 months ago

Because it’s a made up rule, not a law of nature. Having the styles inline on a component is very easy to reason about, it was just extremely impractical with CSS and the style attribute. Tailwind makes it easy, practical, and is actually well designed regarding its support for variables (ie. you can have a sane design system easily).

What you want to share/cascade is variables, not styles. Styling components makes it easy to make sure the styling of each component is isolated and doesn’t have unintended cascading effects. When working this way, using Tailwind is as much a good pattern than, say, CSS modules (which I like too).

Alifatisk• 2 months ago

Oh, have we reached the end of the pendulum swing and are now swinging back to ordinary CSS again.

thiht8• 2 months ago

To be fair, CSS has evolved and improved A LOT in the past years, and a big reason why is Tailwind.

Jach• 2 months ago

Framework-less CSS maybe, but we're never going back to the mindset of CSS Zen Garden. There is no pendulum.

raincole2• 2 months ago

I think the (misuse of) so-called "separation of concerns" has been the most harmful thing that happened in web front end development. HTML can CSS are the same kind of concerns: the presentation layer. The idea that HTML is purely semantic and has nothing to do with presentation is just burying the head in the sand.

Separating HTML and CSS into different files is just like separating a bunch of methods/functions into different files, or splitting one monorepo into git submodules. Yeah, it sometimes makes sense, but if you're doing it for the sake of separating things then just stop.

I think the only point of Tailwind is to make front end devs realizing how much separation of concerns is misunderstood and misused as a dogma. Once you realize that you can ditch Tailwind if you like.

troupo9• 2 months ago

There are different types of separation of concerns :) https://x.com/simonswiss/status/1664736786671869952

xigoi9• 2 months ago

HTML is the content layer. CSS is the presentation layer.

raincole2• 2 months ago

Yes, this is the exact harmful idea that I was talking about. If this were true than there would be no 'reader mode' in browser. Or the reader mode would not modify the html at all.

What you see in reader mode is the content layer. HTML is a part of the presentation layer.

firatsarlar• 2 months ago

A life framework, consensus, that how the man face the thing that they crafting.

simonreiff• 2 months ago

Nice article!

I'm a fan of removing any dependencies on external libraries and writing my own solution from scratch, but there's a good reason why I decided not to do so with Tailwind: They offer an optimization for production that ensures that you never ship more than the bare minimum of CSS needed. This means you can keep your palette of color, spacing, and other options fully enumerated in `globals.css` and elsewhere, without worrying whether you're using all those variants in production. Moreover, if you're working within a framework, such as Next.js, this minimization step automatically happens when you build, without even having to worry about whether it's happening. This alone is a compelling reason, at least for me, not to migrate from Tailwind.

Also, I've never found any restrictions in Tailwind in using inline CSS that weren't readily navigable, or in implementing really nice responsive grids that handle different screen widths for instance using Tailwind's grid tooling. I definitely have solved each of the scenarios described in this article using Tailwind or a Tailwind-CSS combination, but it's true that they don't have grid-column-areas natively. Still, I haven't yet found that to be a significant restriction in getting responsive grid layouts.

I think the biggest issue with Tailwind is simply that it takes a long time to get used to reading it. We all learn that inline CSS is bad, globally scoped CSS is best, etc., and we get used to seeing clean simple HTML. Then we look at real-world code featuring Tailwind and it just looks so hard to read at first, especially because the lines are so long. I guess I just have been using it long enough that I've gotten completely used to the way it looks, but I do remember it took me a very long time to get comfortable with reading Tailwind. After a long while, I concluded that, for me, Tailwind really is more efficient and maintainable and even more readable, but it definitely took quite a bit.

SahAssar• 2 months ago

This means you can keep your palette of color, spacing, and other options fully enumerated in `globals.css` and elsewhere,

Why not use native css variables?

Moreover, if you're working within a framework, such as Next.js, this minimization step automatically happens when you build, without even having to worry about whether it's happening

Again, if you are using plain css I don't think this is an issue. With any modern build system it will spit out css file for that build, right?

After a long while, I concluded that, for me, Tailwind really is more efficient and maintainable and even more readable, but it definitely took quite a bit.

I think this sentence says it all: Any framework will be "more efficient and maintainable" once learned, even if "took quite a bit".

For tailwind I think it's an abstraction too far, but that's a decision we all do ourselves.

xrd• 2 months ago

I really, really love Julia Evans writing.

She writes from a place of vulnerability and honesty. Most people write to sound smart and she writes to say "I don't know it all but there are some things I discovered I want to share." I almost feel like she writes to share things with people she loves, even though she doesn't know them directly.

She spoke alongside Randall Munroe at the last Strange Loop (RIP). Some people waited to talk to him afterwards, but I waited to talk to her. I don't think she got my joke that she should rewrite her bash scripts into perl and for that I'm truly sorry.

bthallplz• 2 months ago

I almost feel like she writes to share things with people she loves, even though she doesn't know them directly.

Thank you for articulating this!

I'm not Julia, but I'd just like to put down here that this is pretty much my philosophy for public speaking/giving presentations, and I have been trying to instill it in some coworkers who struggle with presentations. It's a great privilege to be able to convey to one's peers and loved ones things that you're (likely) a bit more familiar with than they are and which may help them with some matter.

iovrthoughtthis• 2 months ago

html encodes a tree of objects

css applies attributes to objects via graph queries

the queries are tightly coupled to the tree. you must work hard to avoid scatter gun edits now. it doesn't make much sense to have attributes stores in a separate location to their use

it would be like assigning all of your instances attributes using decorators

efortis3• 2 months ago

CSS Modules are a simpler solution to cascading problems. They create unique class names, so your classes don't clash [1]. And they don't have the two main downsides of TW, which are readability [2] and tooling. Tooling for debugging and experimenting interactively with Chrome and FireFox DevTools.

[1] https://x.com/efortis/status/1888304658080256099

[2] https://github.com/ericfortis/tailwind-eye

culi3• 2 months ago

Don't most modern CSS tools create unique class names? I know styled-components did.

Recently I've been using linaria which is a drop-in replacement for styled-components (exact same API) but its zero runtime. All the CSS is compiled during build (similar to vanilla extract, panda CSS, etc).

I really prefer things like styled-components or Linaria or CSS Modules where you can just write straight up CSS. If you ever decide to switch your tool you should always be able to just copy-paste your CSS away. You don't get that with Tailwind or "styles-as-objects" stuff (StyleX)

efortis3• 2 months ago

True, I didn't mean to omit other solutions, I thought styled-components were deprecated after React 18.

thisismyopinion2• 2 months ago

We've for a while determined that unique class names are a dark pattern. Having to match unique and unreadable names with the actual src is a productivity killer.

bumbledraven• 2 months ago

TFA links to https://joshcollinsworth.com/blog/tailwind-is-smart-steering, which is about Tailwind, but makes multiple distinctions and points that could just as well apply to LLMs, e.g.:

Builders value getting the work done as quickly and efficiently as possible. They are making something—likely something with parts beyond the frontend—and are often eager to see it through to completion. This means Builders may prize that initial execution over other long-term factors.
Crafters are more likely to value long-term factors like ease of maintainability, legibility, and accessibility, and may not consider the project finished until those have also been accounted for.
In my view, the more you optimize for building quickly, the more you optimize for homogeneity.

HungSu• 2 months ago

I'm observing recurring patterns in Tailwind-only users: they learn a lot of non-transferable and bad habits, especially when the codebase scales up:

- Engineers never learn to properly use developer tools to debug CSS

- Components get gigantic bloated piles of classes that are not human readable

- Those gigantic piles of classes get logic in them, that often would have been easier to write as a CSS selector. Tailwind developers learn to write a JS ternary operator with a string of classes instead of ever learning how CSS selectors work

- Those ternary operators get too complicated. The engineers write object maps of Tailwind classes, or export consts of strings of Tailwind classes to use later. Those object keys and const names are what the CSS class names could have been if they just used CSS. They literally re-invent CSS classes, but worse.

- Tailwind classes can't be migrated. You can migrate CSS to Sass to CSS modules to Emotion CSS to etc mostly just by copying them over, because all of those are CSS (with some quirks). Tailwind classes are non-transferable

The happiest medium I've found was in an organisation of around 200 UI engineers: scoped CSS so that engineers can work with autonomy without colliding with other engineers, plus Tailwind for quick band-aid fixes.

troupo9• 2 months ago

You can migrate CSS to Sass to CSS modules to Emotion CSS to etc mostly just by copying them over, because all of those are CSS (with some quirks). Tailwind classes are non-transferable

Tailwind classes are literally vanilla CSS classes. You can copy-paste their definitions directly

locallost• 2 months ago

I wrote my first CSS 20 years ago, and one thing I can say for sure is that it's impossible to really structure your CSS in this way. The structure will break down over time and it will anyway be buggy and you'll be chasing your tail, as long as everything you do is global. It might work if you're a solo developer, but the reality is most projects involve multiple people trying to get things done. As long as a style is global, changing it will break something else. These days I use scoped styles and that's it.

My favorite is when colleague A broke something from colleague B, who fixed it but broke sometimes from me, and I fixed that and broke what colleague A did. The process repeated once more and it landed again on my desk, where I said wait a minute, I've been here already. We were than able to fix all three things at the same time.

So it's difficult to keep track of everything.

outlore• 2 months ago

IMO the killer feature of tailwind is that it lives alongside your React components so you keep things DRY, and you get a design system with type and spacing scales out of the box. It’s a form of constraint that helps create structure. But I think that makes it a victim of its own success. The tailwind spec becomes ever more complicated the more native CSS features it tries to include. I’ve seen tailwind incantations go way beyond editor wrap line

I still like it though. it’s one of those abstractions that actually helped me learn. I would go to the tailwind doc pages and see the underlying css of any class.

There were some other frameworks I got excited about: vanilla extract and stitches, both made by some really talented people. I wonder why those never quite got the same traction…

klaussilveira• 2 months ago

It bothers me that SMACSS is from 2011 and was completely ignored. That was the sane way to write CSS. Been doing that for more than 10 years and never had issues redesigning large applications.

https://smacss.com/

srcreigh2• 2 months ago

That site is a portal back to 2011, wow. Thanks for sharing.

microflash• 2 months ago

I’m a lot better at CSS than I was when I started using Tailwind.
I got curious about what writing more semantic HTML would feel like.

This is so relatable. In the beginning of my career, I used to add so many dependencies for things I did not know. But these days, I mostly work on removing dependencies because I'm a lot better at using the web platform. I treat the web platform and browser primitives as materials to build what I want rather than a blank canvas to paint things from scratch.

dev3602• 2 months ago

Tailwind makes sense when you can use React Components to build a reusable design system. It is annoying as heck to use if you don't have that superstructure.

dev3602• 2 months ago

To add: I dont want to go back to writing semantic css.. no thanks - I dont go in time-back machines. This is a mess.

Just using tailwind and anchoring around a design system like shadcn is just way easier for a team to align around than somebodys made up css language.

meerita2• 2 months ago

The only problem with Tailwind is its syntax. It is anti-CSS. It is confusing and takes time to get used to. Heck, people even wrote cheat sheets. That makes adoption wrong, because people install it just because everyone else uses it or because the current thing brings it in. A long time ago, before Tailwind, I was writing true, pure functional CSS https://www.fcss.club/manifesto, and I never came back to the old OOCSS or BEM style of structuring all the styles in a project. Components helped a lot with that decision. Today, functional CSS does not make sense only if your website is truly, truly simple. But if your application is more complex, FCSS outshines everything else: speed, rendering, simplicity https://www.fcss.club/syntax, and weightlessness.

thiht8• 2 months ago

It is confusing and takes time to get used to

I don’t believe Tailwind is inherently worse than pure CSS. If Tailwind had existed from day 1 on the web and you had learned it first you probably wouldn’t say this. In fact, if Tailwind had existed first somehow, and someone came up with CSS as we know it as a new revolutionary library, I’m not sure it would have succeeded.

meerita2• 2 months ago

Well, the old-school way was something like this: h1.font.size = 24pt 100%. Tailwind has its own syntax, so you need to learn it first, which adds extra cognitive load. For things like * { color: } in Tailwind, you have multiple options: text-color, stroke-color, etc. With FCSS, you simply have color--[colorname] { color: … }. It’s simpler and avoids unnecessary cognitive load.

HiPhish2• 2 months ago

I just want to point out that you can use Tailwind inside your CSS with the `@apply` directive (not to be confused with the since abandoned CSS `@apply` rule). You write your CSS and mix in Tailwind instructions where it makes sense. Example:

    @import 'tailwindcss';
    
    p {
     @apply text-justify;
     @apply bg-slate-300 dark:bg-slate-800;  /* Second rule just for colors */
     display: block;  /* regular CSS */
    }

I used to be a big Tailwind hater because putting all those utility classes as inline styling into my HTML is a crime against nature. But this way I get the best of both worlds. Tailwind is really nice as higher-level building blocks and saves me from writing a bunch of media queries.

thiht8• 2 months ago

putting all those utility classes as inline styling into my HTML is a crime against nature.

It’s really not when working with components instead of pages, and when working with variables properly

HiPhish2• 2 months ago

Even with components I prefer what Astro is doing: the component can have a `<style>` tag in which I can add my own CSS. When building the website Astro will know how to transform the CSS so it only applies to that component. This way markup and presentation remain separate even if they are within the same source file.

https://docs.astro.build/en/guides/styling/

bitbasher• 2 months ago

I used Tailwind in one web based product and it was alright, but I'll never go back to using it.

The HTML bloat was really tough to deal with. I spend far more time in HTML than I'd like, and having more Tailwind classes than I do semantic HTML was really tough to look at.

I've settled on using vanilla CSS and applying styles per-page on an as needed basis. For example, include base styles (reset, primary theme, etc) and then include marketing styles (or: blog styles, dashboard styles, syntax highlighting styles, charting styles, etc).

It keeps each page light and minimal. Reading the HTML is easy. Styles stay consistent across any pages that share styles, etc.

anydigital3• 2 months ago

We also moved away from Tailwind — Pico CSS. It feels like a breath of fresh, modern CSS air.

We actually loved it so much that we’ve taken over maintenance of a fork, and just released our Pico successor candidate: https://blades.ninja/

d3m0t3p• 2 months ago

It is really fun that the navbar has unaligned elements. (Docs is lower)

anydigital3• 2 months ago

we were focusing on Mobile and Desktop versions, are you somewhere in between?

to be tracked here: https://github.com/anyblades/blades.ninja/issues/7

wbadart• 2 months ago

Great writeup!

Lately I've been enjoying Open Props[0]. It's a library of CSS props/ variables that helps structure a design system. I like it because it's CSS-first, so like OP experienced moving off TW, I've learned more CSS, and it works with the browser not against it. It also provides some sane defaults for anyone less interested in fiddling with precise cosmetics.

[0] https://open-props.style/

ramijames• 2 months ago

I'm so grateful that people are starting to see that Tailwind is insanity. Just write your class and your CSS as CSS. We don't need to pollute templates with endless hard to parse and reason about tailwind nonsense.

SwiftyBug• 2 months ago

One approach I've been really starting to enjoy is to use use Tailwind alongside scoped styles (in Svelte and Vue). This keeps template pollution minimal while still allowing for the conveniences Tailwind brings:

  <div class="counter-component">
      <button @click="count++">+</button>
      <span class="count" :data-is-even="count % 2 === 0">{{ count }}</span>
  </div>
  
  <style scoped>
  @reference "tailwindcss"
  
  .counter-component {
      @apply flex items-center gap-2;
  
      button {
          @apply bg-gray-800 text-white;
      }
  
      .count {
          @apply italic text-teal-500;
  
          &[data-is-even="true"] {
              @apply text-rose-500;
          }
      }
  }
  </style>

keithnz• 2 months ago

yeah, likewise, I locked in on this very early on even though it goes against what the tailwind creators recommend. But I've never regretted this approach and it works well.

prokopton2• 2 months ago

Adam always did say best practices don’t work.

pauxel• 2 months ago

The part I’d miss most from Tailwind is not having to invent semantic-ish names for every wrapper, row, card, inner-card, card-content, etc.

DeathArrow• 2 months ago

The purpose of web is to display various things and let the user interact with them.

Nobody cares about true REST (modern day RESTful is a different thing), HATEOAS or semantic web. People tends to simplify things.

We probably can live with just 7 html tags,<title>, <style>, <div>, <form>, <input>, <button>, <a> and CSS.

kylehotchkiss• 2 months ago

Author in 6 months:

How I refactored my rats nest of CSS back to tailwind.

dudeinjapan• 2 months ago

The elephant in the room is AI. The frontier LLMs seem to prefer Tailwind by default. And they do a good job with it--likely because coupling style definitions to your HTML document structure is the least overhead way for an LLM to write code. The alternative--reasoning about a platonic ideal CSS structure, mapping the document structure to that an inferring how the layout will look, then juggling all that while making iterative edits--is a lot more "cognitive" work!

icar• 2 months ago

This feels like reinventing Tailwind, but worse.

jakubmazanec• 2 months ago

For me, the main thing I love about Tailwind is that I don't have to create ad-hoc class names. No more BEM.

brokegrammer• 2 months ago

Two great things about Tailwind:

- AI already have data about its classes in their training data - No conflicting styles

This means that AI doesn't need to reference any existing stylesheets when generating new styles, which is great for context management.

With custom CSS, you'll have AI read existing stylesheets because otherwise its going to write conflicting styles or rewrite stuff you already have. This can be a problem if you have large stylesheets that take too much space in AI memory.

andy_ppp• 2 months ago

Great stuff, one thing I tend to do is set the body font size to be 10px but in ems so all calculations can be made easily - body { font-size: 0.625em; // 10px } and then if you want a heading to be 20px you just do h1 { font-size: 2rem }

prokopton2• 2 months ago

Always happy to see a Tailwind/no-Tailwind flame war.

fps-hero• 2 months ago

Tailwind isn't just a framework; it's a design system.

The creators of Tailwind wrote the brilliant book "Refactoring UI" [0], which presents a systematic design system, introducing ideas such a type-scales, color-scales, spacing, and tactics to minimizes the cognitive burden on the designer by forcing design choices. The ideas presented in this book basically are tailwind classes!

When you build with Tailwind, everyone is speaking the same design language, and you end up with harmonious designs, even when components came from different projects or designers.

I disagree with the author's approach. It's basically just copying the utility classes from Tailwind and implementing them in an unergonomic way. Perhaps the best idea is component level CSS which is something that's been enabled by better tooling. I would implore anyone who doesn't really get Tailwind, to read the origin story [1].

[0] https://refactoringui.com/ [1] https://adamwathan.me/css-utility-classes-and-separation-of-...

zdragnar• 2 months ago

Both refactoring UI's ideas you mentioned and component css far predate tailwind.

Atomic CSS really solves problems that only exist if you're holding the tool wrong, in my humble hot take.

digitalblender• 2 months ago

From an accessibility point of view and working on an accessibility audit, using tailwind and utility classes can be really difficult. Working with tools like Siteimprove, will ask if there are matching selectors for things that may be similar, and idm there aren't you may find yourself, looking at each page separately, with that component in it.

Brajeshwar• 2 months ago

Once upon a time, whenever I interview developers, most of them proudly announced their expertise in jQuery. I have to bring them down to the basics and ask them about JavaScript. Almost all of them were lost. I asked them, if not for this, but to learn JavaScript and all the other framework will that; a framework on top of JavaScript which one can just use (perhaps take a week or so ro learn).

The same goes for CSS. Everyone bolded, and highlighted their experience with Bootstrap but missed the CSS. I did used Bootstrap, Foundation, Skeleton, Bourbon, and many others, especially when working with the team, so we all can speak the same language. This is true for Tailwind too. I remember when Tailwind was still in alpha and I realized that was the perfect tool to bring the team together and move fast. I was able to use it both as a utility and like most other people as the HTML polluter (but it worked).

If one is keen, it is always a good idea to learn the core - HTML, CSS, JavaScript; all the frameworks that wraps them should just be syntactic sugar. Bootstrap came and went, so will Tailwind.

PS. With AI/LLM Coding Assist, writing in plain CSS is becoming beautiful again. I can outline what I want, give it a checklist and make it do the strenuous part of writing them. I don’t even have to remember the cascades.

yashasolutions• 2 months ago

I have found some nice middle ground with Frankenstyle [0] framework which take some inspiration from Tailwind (and Shadcn) but with no-build, which is the thing that I found really annoying with Tailwind. CSS with a build process is already not css anymore. But I understand the feeling of OP to want a cleaner code - without sparkling style details all over the html, though overtime I do feel it really gets out of hand and in the end having the styling in the html makes it less complexity to manage which class is where.

[0] https://franken.style/

cypherpunk666• 2 months ago

for me i want more semantics. the top level thing we read and maintain and apply should be "roles".

https://docs.google.com/document/d/1oIb025h3UcHMJA1zPtk1kauo...

ceedan• 2 months ago

Fine for personal stuff and exploration.

In a work setting, beware of DIY Syndrome. Move away from an established tool, and now your on the hook for documentation, onboarding and maintenance. When the one dev who cares about that leaves the company, everything will fester. It never ends well.

moomoo11• 2 months ago

oh god bikeshedding alert

next thread

PUSH_AX• 2 months ago

I’ll catch some flack for this but having done this for a considerable amount of time, I just feel like there are harder and more time deserving engineering problems than how to make a div grey…

I like tailwind because it lets you spend more time on things that matter and not bike shedding styles , it just doesn’t matter, zoom out more.

lofaszvanitt• 2 months ago

I used the same structure 20+ years ago in the heyday of the web, when I was starting as a dev. If you use tailwind, that's a sure sign you don't understand css. That's all. It's a signal of your incompetence. And at the same time it shows that the dev ecosystem has serious usability issues.

zelphirkalt5• 2 months ago

Points 1-8 all seem like basics. Smart, but ultimately basic, and what every web dev should know and learn how to do. I am not even a web dev mostly, only occassionally, and I have discovered most of those things by myself, as kinda logical consequence of what you can do with CSS and the desire to keep things simple.

That said, it is a good post putting all those things into one post and give a sane baseline for people who are new to this, or don't know the web's basics well.

Chipshuffle• 2 months ago

It seems to me there are always two camps when it comes to CSS vs. Tailwind. The one claims that CSS was the right solution all along and it should just be learned and adopted. Then there are others that say that Tailwind makes CSS more approachable and learning CSS never had priority.

I'd like to think that LLMs help with the first approach, I'm certainly now a little more curious to try plain CSS again.

luodaint• 2 months ago

When an agent writes a component, the styles come along with the JSX. "flex items-center gap-4 bg-purple-600 rounded-lg" doesn’t require any mental context switch to a separate stylesheet file. Custom classes force you into a separate file for each component; utility classes keep the style information close at hand.

The other thing Tailwind stops from happening: class name bloat. In its absence, agents invent classes such as "card-header-inner", "feature-block-content", "sidebar-item-wrapper" – all separate naming choices. After a few months of development, you accumulate hundreds of classes that are not owned by anyone. The limit placed by Tailwind is in its vocabulary; there are no names to invent. This trade-off described by Julia exists. It's just articulated a bit differently.

kirtivr• 2 months ago

A less known hack that can help people build professional websites that do not have the crazy gradients, wonky logos, typography and other tell-tale signs of being LLM generated:

Get the TailwindCSS lifetime membership. Costs about $50 if I remember correctly, but they give you all the UI blocks and CSS components, and then you can simply create a frontend-design skill based on Claude's (https://github.com/anthropics/claude-code/blob/main/plugins/...) that instructs the coding agent to only use TailwindCSS catalyst and UI blocks (you'll have to download these).

This is how I built my own website.

Moving away from Tailwind, and learning to structure my CSS

Related Stories