DEV Community

CSS vs Tailwind CSS - I built the same home page with both

Fabian Frank Werner on December 19, 2025

If you go to any social media right now, I promise you will find developers screaming at each other about CSS. On one side, you have the Purists. ...
Collapse
 
maxart2501 profile image
Massimo Artizzu • Edited

If you are a beginner, [...] do not start with Tailwind.

Good, good! May I add some lines?

  • If you are mid level, do not start with Tailwind.
  • If you are a senior, do not start with Tailwind.
  • If you are a guru, do not start with Tailwind.

In short, do not start with Tailwind ever, period.

You call CSS users "purists" versus Tailwind's "pragmatists", but let's see what Tailwind's adoption means pragmatically:

  • of course, readability goes down the drain;
  • for every .css files that goes from 150 kb to 40, every html page goes up from 20 kb to 40;
    • and don't start with "HTML can be compressed very well": CSS can too;
    • CSS files are aggressively cached by browsers, HTML are not.
  • it's never Tailwind alone: here comes a plethora of plugins and packages, from your IDE to runtime, that you have to install just to get a grip on the mess;
  • debugging with dev tools becomes an awful experience;
  • RUM data becomes gibberish...

I can go on for hours.

Collapse
 
fabianfrankwerner profile image
Fabian Frank Werner

Please do, I'm interested in what's left :)

Collapse
 
maxart2501 profile image
Massimo Artizzu • Edited

I could honestly write a whole series on the matter, but I fear it could unleash mean reactions from the frontend community.

  • Tailwind fans often show how they get the best from LLMs because they answer using Tailwind basically by default. Problems arise when a new major version of Tailwind comes out, and AI will still give answers based on the old version for months. It already happened.
  • The aid you get from fast prototyping gives the false impression that everything can be assimilated as a fire-and-forget project, thus neglecting maintainability.
  • When you take zero effort in naming a class, you don't think about what meaning or purpose an element has: this seems liberating at first, but in the end this is what happens:
    • we stop thinking about the meaning not only of classes, but of attributes and tag names. Everything becomes a <div>, and DOM size and accessibility suffer;
    • we carry long strings of Tailwind class names around in our runtimes because what we have left is merely a presentational effect, and not a meaning anymore.
  • Wanna learn from the masters? Tailwind's own website is a disaster, where you can find class names several thousand characters long because they embed a freaking PNG in base 64! Nobody really know what to do with Tailwind.
  • This is crystal clear when so many devs defy one of the main advantages of using utility classes: not having to name things. Instead, so many use @apply, others pack class names together in "variants" (which you have to name).
  • And in the latter case, it all happens at runtime, which is something we loathed so much in those CSS-in-JS libraries, but now it's acceptable somehow.
  • By the way, @apply will conflict with the upcoming native CSS mixins: which means Tailwind will prove itself to be not future-proof yet again, after Tailwind 3 inability to use @layer freely.
  • Not to mention having to wait for a new major release just to support a new native CSS syntax, which is doubly ludicrous as a feature could be available for months before you could use it, and has been conceived by renowned tech experts and browser representatives, instead of Adam Wathan's capricious unvetted ideas.
  • The result of short-term gain and a lot of advertising has created the most toxic community of klout chasers around something so foundational like CSS, it's honestly disgusting. I swear I've seen the exact same post about a "revolutionary technique" with Tailwind posted on LinkedIn by some self-appointed "senior full-stack development architect" or whatever that's actually a copy of a post by David Khourshid on Twitter.
  • And apropos of that, Tailwind's bracket syntax is a giant middle finger to whoever conceived CSS as a structured language to express complex relationships, to the consolidated best practice to avoid magic numbers, and to the usual convention of having a specificity of 0.1.0 for utility classes.
  • Let's not forget classes have been conceived more than a quarter of a century ago, when we didn't have anything better: now we do and we can be more expressive and effective without using classes altogether (I've been doing this for years now).

Enough?

Thread Thread
 
fabianfrankwerner profile image
Fabian Frank Werner

Thank you for taking the time! With such strong insightful opinions I would love if you published more posts, even reasonable rants are very entertaining content. Do you have an active blog or newsletter I can check out?

Collapse
 
alohci profile image
Nicholas Stimpson

"The Vanilla CSS file would grow Linearly." Only if you want every page to look entirely different from every other page on your web site, or you're really bad at choosing class names.

On any normal site, if the class names are well-chosen to reflect the semantic domain space of the site's content, many of the classes you use on your home page are going to be reused across all the other pages. The second page you create will add a few extra classes and some of these too will be used across many subsequent pages. The growth curve will be a very similar shape to Tailwind's.

Collapse
 
fabianfrankwerner profile image
Fabian Frank Werner

Thanks for pointing that out. In the end it comes down to personal preference, I guess...

Collapse
 
tracygjg profile image
Tracy Gilmore

That is not quite true.
CSS is a standard that is widely applicable and will be for years to come.
Tailwind, a good as it is, is a skill that might not be applicable in your next project and will some day be replaced by the next shiny new tool.
Besides, each additional tool or library is project bloat. Standard web technologies are built into the browser.
This also applies to Fetch API v Axios, and I really like Axios.

Thread Thread
 
fabianfrankwerner profile image
Fabian Frank Werner

True!

Collapse
 
spo0q profile image
spO0q • Edited

Tailwind is a system!

It's definitely not meant for beginners. Sharp tool!

A great use case, though, is when you need a similar system. In this case, it's probably better to rely on this tool than to do it yourself, but even in this case, be aware it's also designed for modern browsers.

Collapse
 
fabianfrankwerner profile image
Fabian Frank Werner

True!

Collapse
 
appurist profile image
Paul / Appurist

Sorry, but the bias on this is obvious. Phrases like "I didn't have to create a new class" hide how simple it is. And your HTML isn't polluted like it is with Tailwind. Take a look at "Why Nue" and remember web development when it was actually web development, not investing a whole learning slope for something that the web doesn't actually use.

Collapse
 
fabianfrankwerner profile image
Fabian Frank Werner

Will check out Nue!

Collapse
 
itsugo profile image
Aryan Choudhary

Love the nautical-themed comparison! Tailwind CSS might be the trusty compass that keeps your design on course, but Vanilla CSS is the open sea where you chart your own course and learn the ropes. Can't help but wonder about how you handle the trade-off between file size and project complexity in your own work?

Collapse
 
fabianfrankwerner profile image
Fabian Frank Werner

Nice ai response

Collapse
 
118m8 profile image
118M8

Good for use

Collapse
 
fabianfrankwerner profile image
Fabian Frank Werner

🫑

Collapse
 
neurabot profile image
Neurabot

Congrats.