This week, I needed to add a simple hover effect to a button. Nothing fancy. Just change the background color on hover.
I stared at the screen for...
For further actions, you may consider blocking this person and/or reporting abuse
The main problem for me is that to mimic CSS people are creating frameworks on top of Tailwind, like shadcn/ui. We know creating abstraction layer on abstraction layer is a recipe for failure.
While the idea of utility classes is great, Tailwind took it to the extreme. When you take one thing to the extreme, and follow that mindset you are missing out options that make code simpler.
There are not many languages that are only OOP or functional, most of them combine programing paradigms.
I think the elephant in the room is why are the designs not preventing you from needing to resort to utility classes. Designs should give consistency. Utility classes are for exceptions.
ShadCN is another utterly loathsome idea: it's basically a dependency without being an actual dependency. Meaning it's not versioned. It doesn't have tests. You're not familiar with its code. And yet, you're tasked with its maintainance, becase it's in your codebase.
And you downloaded from a source that's outside the usual security radars (i.e. ShadCN's repo).
That's a great point about abstraction layers, then when one domino falls, all the rest do too, then we'll be more reliant on AI to pick up the missing pieces (since so many are going for vibe coding, including myself).
Not vibe, agentic.
Man… this hit way too close. Tailwind’s great and all, but it really did turn half of us into “hover:bg-whatever” machines.
Kinda wild how fast you forget actual CSS once you stop touching it.
I open a stylesheet now and my brain legit needs a warm-up lap.
Tailwind makes life easier, sure… but yeah, the muscle memory theft is real.
Thanks for this conversation starter. I started CSS when it was a draft from the W3C (1996) but didn't get to use it really in production consistently until 2008. Why? Because the business and the users wanted pixel perfection: the web was new, and we generally moved slowly (even in Silicon Valley, yes even Yahoo!)
Then after 2012 I lost touch with technology completely, but I imagined that CSS, with the modularized specs of version 3 was going to become the way the presentation layer was always envisioned.
In 2022 I came back and tried to catch up and my take has been this: the business moves too fast for developers to think things through and work on a long term framework. Also, let's face it: front end is still a step child of the development pie, it is not taken as seriously as other areas. In 2022 I started looking at the pure CSS and wrote that as I tried to close a wide technology gap knowledge... Meanwhile I saw Bootstrap on many sites and picked that as a framework to study. Within 12 months, I heard about Tailwind's rise and looked at that too and frankly found both useful but with a steep learning curve. That's normal, however, business expectations are ABNORMAL and that leads to the rapid adoption not backed by critical analysis. It is happening everywhere in society and the majority of people opt to be silent and just tag along.
I also believe that Tailwind's utility-first approach takes style rules and convert them in inline description of how an HTML should look: doesn't take violate the "separation of concerns" between structure and presentation? Yes it does. And nobody raised it as a red flag? No, because it would have meant defeat for the hordes of businesses that relied on React but could not harmonize their components with CSS doing the presentation.
Therefore I thank you for being the person who "raised the hand ✋" on this issue for the common good 👍
Aha. You wish.
When it comes to actual projects, devs name a lot of things, because even the most fervent Tailwind aficionado will stop and give a name to a sequence a 18 utility classes that consistently apply to a button, calling it a "variant".
Maybe you name fewer things. But maybe the effort of naming thing makes you think before act and realize if the thing you're going to do makes sense or not.
AHA. YOU WISH.
That may be true if you limit yourself to the most basic classes - even those with custom values. But that's not true anymore when it comes to "child selectors" or when trying to use
:has()or:not().That was even more problematic in Tailwind 3, but here's the thing: a lot of projects are stuck with Tailwind 3 because switching to 4 is too much for a project that choose Tailwind because of "less maintainance".
I've never understood the compression argument. CSS compresses as much as HTML if not better.
Those are just mere number. The reality is actually worse: CSS is aggresively cached by browsers. HTML is not. Now your e-commerce site must send 80 KB of HTML whenever the user clicks on a link, instead of 40.
Did the marketing mention that now you also have to install tailwind-merge, tailwind-aria, clsx, ... with their own runtime overhead? And the VS Code plugins you need to install to collapse all the
classattributes when inspecting the markup and other stuff to make everything manageable? The same plugins that you don't get to install on the browser's devtools?What about RUM reports that tell you that a certain element has been clicked... and automatically pinpoints it as a
divwith a dozens of classes and you have no idea where it comes from? Same thing for automatic accessibility tests? How did the marketing sell this "feature"?Problem is, it's promoted by Vercel. Vercel means Next. Next means React.
And React is, always has been and, apparently, always will be tragically bad when it comes to CSS. So much that it funneled a myriad of userland "solutions" to the cloaca of CSS-in-JS, and culminated with this Tailwind footgun that is sold like it's revolutionary but it's actually not novel at all. The concept of "atomic CSS" is ~15 years old at this point and it always failed miserably - before Tailwind. For very good reasons.
It's probably past time we ditch React too, to be honest. Its ecosystem is a complete mess. There's plenty of better alternatives anyway.
Well, I do: stop using it. It's trash. There's now single redeeming quality, except a fairly good design token that could be paralled by something way less intrusive anyway.
No, it did not. It made me both hopeful... and pissed, because we could have had this conversation a long time ago.
(Sorry, I won't follow you on X. We can talk on Mastodon or Bluesky if you wish.)
I totally get this, Tailwind is amazing for speed, consistency, and not having to wrestle with specificity or naming classes, but it’s easy to see how relying on it exclusively can make us forget the fundamentals of CSS. I’ve felt the same “muscle memory” shift, I’ll instinctively think hover:bg-blue-600 before :hover { background-color: … }. I think the key is balance: use Tailwind for productivity, but keep practicing vanilla CSS, teach juniors the fundamentals first, and stay aware of the evolving platform features like container queries and cascade layers. Otherwise, we risk building an entire generation of developers who know Tailwind but don’t really know the web platform underneath.
Such loud words for a simple tool, not even a new paradigm =) I don’t like this kind of cultism. PHP is still being buried every year, React is decent, but Vue and Svelte have already replaced it in many projects - and tons of teams choose them, etc., etc. ...
Yep. That’s why I honestly call it cancer. Once you use TW in a component library, you’ll have to drag it into the website that uses those components. And if it’s a legacy project - are you sure you won’t break anything with Tailwind’s built-in style reset and generic class names? I’ve personally seen cases where Tailwind broke existing logic because the site already had a global
.hiddenclass doingvisibility: hidden, and then Tailwind came in and wrecked the layout withdisplay: none.In short: it’s just a tool. And, as an engineer, you need to decide where it belongs and where it doesn’t. The key is not to fall into tool worship and not to force it where it causes more harm than good. Because then you end up with stuff like:
@applyoverriding original CSS or even writing regular CSS classes stuffed with@applyand Tailwind classes inside lol.I won’t even talk about how “readable” markup becomes with Tailwind. It’s just mush on the level of minified code. And since you can’t always see every scenario live - maybe there’s no such user or the feature is disabled right now - you’ll have to fix or add something based purely on code. Now be honest: what’s more readable - an element with a couple of clear BEM classes or a component/page (especially 1k+ lines of markup) stuffed with
div/a/img/p/ul/li, all seasoned with Tailwind classes? With 2 themes. Across multiple breakpoints - with all thosesm/md/lg. Mmm ~Plus, one more interesting and not very pleasant point: I know several people who dislike this technology but are afraid to speak about it publicly, because others might think they’re unprofessional or against progress lol. Not sure how widespread this is, but it’s clearly unhealthy. It can create a false impression that everyone uses Tailwind, everyone more or less likes it, it’s won all the awards, taken over all the projects, etc. When in reality, things are very different.
So personally, I consider Tailwind a decent technology for its niche: prototypes or quick features where - and this is key - you probably won’t come back to later. Because developers spend most of their time reading code, not writing it. And that instant “Haha, I’m doing flex align-center brrrr” savings can bite you hard later, when you have to untangle all this in 5-6 years.
Idk bro... as soon as you said "cultism" I was lost, I expected better communication from an engineer, but I guess they ain't building them like they used to.
I'm worried that developers can't write assembler anymore. It's all these high level languages like C which abstract away and hide the details of the metal. In other words Tailwind is just a abstraction over CSS which gets the job done. I don't want to be an expert in layout and graphic design; which is lucky because for the most part I'm a back end dev, so Tailwind solve 99%. For those who need the control they still have the option.
If you're a backend dev you should limit yourself to use the UI components that are available to you. Period. You shouldn't touch presentational attributes if it's not your expertise. Let a frontend dev adjust the rest.
If you want to learn about frontend stuff, start from the basic. Learn CSS.
Or maybe learn accessibility patterns.
Tailwind should be the last of your concerns.
Totally agree — Tailwind makes building fast and consistent, but it’s scary how easy it is to forget real CSS. The “training wheels that never come off” part hit hard. Great reminder to keep learning the core web platform. 👏
Twenty-one years ago, I built my first client website. Fresh developer, barely understanding CSS, just learning the basics of the web platform.
That site is still live: esmetlimitada.cl/
Same code. Zero updates. Zero maintenance. Still works perfectly.
I keep it unchanged not because the client doesn't need updates (though they don't), but because it's a time capsule. A reminder of what's possible when you build on fundamentals instead of abstractions.
Your article crystallized something I've been feeling but couldn't articulate: we're optimizing for today's productivity at the cost of tomorrow's maintainability.
I now build everything with Laravel + Tailwind. I'm 10x faster than I was writing vanilla CSS. But I wonder: will any of my current projects still be running in 2046 without updates? Or will they be legacy code requiring constant migration?
That 2004 site answers the question. The web platform is stable. Frameworks aren't.
I'm not saying abandon Tailwind—I won't. But your point about being "web developers, not Tailwind developers" matters more than people want to admit.
The platform outlasts every framework. Every. Single. Time.
Here the trick! Why you would need to remember CSS? Just let AI handle it for you - the css , accessibility and correct HTML structure, and you focus on logic and overall architecture then back again to AI when you need to debug something or test. That's all
You forgot the /s at the end.
Yup. Wtf. We author now, not code by hand.
100% correct: Tailwind is a disease. Whenever you point out the problems, people come up with solutions that end up reinventing CSS or claiming that the reason it's bad is that people are just using it wrong. I'm pretty sure most of these people don't know how straightforward 99% of CSS is, and none of them understand the cascade.
I refused to adopt Tailwind from the beginning. The madness of adding 10th of utility classes to a simple button is just stupid. Let alone remember all those stupid classes. I guess it's Reacts fault, because you can not (could not, not sure) add to React components. That's why I don't like (and don't use) React either. Just stupid, functions to produce components ... just do HTML and CSS, usually those are perfectly fine. Combine styling into a single class (e.g. "alert-button"). You could use Svelte. At least it feels like HTML and CSS with just the right amount of "magic". There is no need for Tailwind, and even any other UI thingy ... It's actually not so difficult to make HTML elements look pretty.</p>
I felt this way before TailwinCSS, back in the day it was all Bootstrap. Most of my tutorials were using Bootstrap, SASS, or TailwindCSS and I was stuck in tutorial purgatory.
I realized what you did that I don't really know CSS. I couldn't recognize the patterns in learning CSS. I found two articles and they both said to stop using preprocessors.
Become a CSS-Superstar. and Having a good relationship with CSS.
They were right. I learned: clamp(), @container, :has(), etc.
I now just use CSS because I want to be great at frontend.
I didn't jump on the Tailwind bandwagon. I've been using Bootstrap now for over 10 years. Before that I was really good as CSS and do feel that over this time I have lost that edge. I'm just about to jump into a website redesign for a client and am contemplating going back to pure CSS for it. CSS has evolved so much over the last 10 years and will pretty much do everything I want out-of-the-box.
A key point that you highlighted, and I'm pleased you did, is 'The bundle size lie'. I've found this with Bootstrap, on a complex site you can easily bloat your HTML to 10x or even 100x the size. This additional size has performance considerations in terms of both bandwidth (ok not so much of an issue for most of us these days but still relevant) and the time that the browser takes to render the page. It also has a very important consideration in terms of cost. In today's cloud-based world, we are paying for that bandwidth. With CSS it's downloaded once and then cached by the browser. With bloated HTML we are paying dearly for it on every page of a site.
So glad I stumbled on this article! I learned CSS as part of my graphic design degree, though to make a site appear decent (it still looks bad) I had to add so many CSS properties. Now that I'm building my own site with React, Tailwindcss confused me a bit but I was surprised how quickly I gravitated to it, though it was because how good my site looked (and being easily responsive).
Tailwind makes stuff easier, but like my experience, I can't see how a dev can learn it first because Tailwind is basically short-hand. A person knows what the short-hand message means because they can write it long-hand, but it's hard to communicate by learning the other way around.
I found myself automatically using Tailwind for parts that I wanted to make responsive, while using CSS in a stylesheet for elements I wanted to nit-pick at. However, since I was rusty in coding and React was all new to me (I'm a graphic designer anyway), I used Lumo for vibe coding and guess what... it wrote in all Tailwindcss XD
That's a great point about Tailwind being a framework that could expire, as did the other frameworks that were trending. I can only imagine that instead of deleting our HTML's and writing anew, that AI will be part of our work setup (as is with the Zed editor), and will rewrite it all for us... which includes after every major syntax, framework, etc. change.
Though with how complex websites are becoming (my computer can hardly load the extra fancy ones & I have an i7), dev's are gonna want more easy-to-write frameworks like tailwindcss, use AI to write the majority, and it'll be a race on who can make the most complicated, epic, hardware-breaking, but super aesthetically-pleasing website. I already see big companies like MasterCard incorporating tailwindcss (visually it looks like it, anyway).
Readability is a bigest problem plus separation of concern. Utility classes are very handy but if you have more than 5 per block it looks like a problem. I'm using bespoke utility classes for most common things and SCSS for more complex cases. Tailwind is mostly another mass insanity.
To me it looks like csv. Either way,it need to get popularity before people will be able to use it properly,because json alignment is something llms were trained on. Not an easy transition,if it will work.
So I agree but this also reads drastically convoluted in a so what manner of organisation that is either inspired by or augmented by AI - OR reads that way
Tailwind is good because most people don't manually code split or enque, when gulp and grunt died people lost a lot of skills and that is the wider problem I see.
There has always been this expectation that things are already naturally good for SEO and SEO is sniffed at, called dead, or a soft skill
SEO is where UX and Accessibility meet at a fine grained level but web devs don't seem to like fine grained control anymore.
I'd love your opinion on this wider issue.
What I would love is something like Tailwind with Utility classes, but only in development mode, which would allow you to mess around with the classes while perfecting the overall styles of the components. But in production it would build away into a stylesheet with a single hashed class name — maybe even with nesting so child elements don’t also need class names. Wish I was smart enough to figure this out!
Ask Cursor like everyone else.