CSS vs. Tailwind CSS
A Veteran’s First Impressions.
Let CSS vs TailwindCSS commence.
How It Started
My first real memory of CSS goes back to 2003, when I built my first website using divs to lay out the structure. At the time, CSS was just starting to become mainstream, and many sites were still using tables for layout. But I jumped into the deep end with div-based design and inline styles, slowly learning how to separate content from presentation. Every layout was a puzzle, and aligning elements meant hours of trial and error. But I loved it ❤️.
I’ve always been drawn to creative problem-solving, and CSS gave me just enough freedom to make the outcome I wanted.
Websites built with TailwindCSS.
Fast forward 20+ years, and Tailwind CSS is everywhere—praised for its utility-first approach and speed. But to someone who’s spent decades writing custom styles and thinking deeply about design systems, it raises a big question:
Is Tailwind a meaningful evolution of CSS—or just a shortcut that skips the fundamentals? 🤔
To find out, I decided to do something I’ve resisted for a long time: give Tailwind a real test. This post shares my insights—and whether I think it’s actually worth learning over traditional CSS.
Why I Tried Tailwind
So, I decided that for the ultimate challenge, I would build this entire site—yes, the very one you’re reading right now—using primarily Tailwind CSS. No frameworks, no shortcuts. Just me, the docs, and a utility-first mindset.
If things got too tricky or limiting, I would just fall back on traditional CSS where needed. But the goal was simple: live inside the Tailwind ecosystem and see what it really feels like from the inside.
First Impressions
I come from a school of thought where styling belongs in CSS files, not tangled within HTML. The goal was always clean, readable markup—structure here, design there. There’s a certain beauty in that separation of concerns. So when I first looked at Tailwind, my initial thought was: “What the hell is this?”
Tailwind flips the script. Instead of writing a class and defining styles elsewhere, it embeds styling directly in the HTML using utility classes.
Want padding on a div?
<div class="box"></div>
❌ You don’t write the class in a css file.
.box { padding: 1rem; }
✅️ You write class="p-4"
<div class="p-4"></div>
Right there on the element itself. It felt, at first, like controlled chaos.
What I Liked
So I put my objections aside and decided to give Tailwind a real shot. My first stop? The documentation.
Tailwind Documentation.
I needed to understand what these utility classes were doing—and to my surprise, they were fairly intuitive. Most of the class names closely mirrored their CSS property equivalents, which made the learning curve easier.
The documentation itself was excellent—clean, well-organised, and thoughtfully designed. That in itself was a bonus.
One thing that really stood out to me as I began using Tailwind was how easy it was to see exactly what styles were affecting an element. In traditional CSS, you often have to jump between markup and external stylesheets to piece things together. But with Tailwind, the styling lives right there in the HTML. That made things feel more immediate and visually representative—what you see is what you get.
Another bonus of Tailwind CSS: no need to come up with unique class names. With traditional CSS, naming classes can be a tedious task. Tailwind removes that step entirely. Everything is styled through utility classes, and honestly, that was a bit of a relief.
Where It Breaks Down
Unfortunately the advantage of seeing exactly what styles were affecting an element came with a cost.
<!-- This 'div' is a responsive container, look how long it is? -->
<div class="grid grid-cols-1 gap-y-10 py-12 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-3 lg:gap-x-8 lg:pt-24 lg:pb-12 xl:grid-cols-3 xl:gap-x-12"></div>
The more complex the design, the more utility classes I had to stack onto each element. When that happened, the readability started to break down, and it became harder to understand what was going on. I realised I’d need to come up with strategies to manage and organise my class usage more effectively.
Verdict
One thing I can’t deny about Tailwind is how quickly it let me develop this site. If I’m being totally honest, had I built it using only traditional CSS, the process would’ve taken significantly longer. Why? Because I would’ve had to spend more time managing class names, jumping between files, and keeping mental track of what each class did. With Tailwind, that overhead disappears. The utility classes are concise, and—once you get used to them—you end up writing less.
So in that sense, Tailwind’s promise of ‘Rapidly build modern websites’ holds true.
TailwindCSS claim in building Rapidly modern websites.
But here’s the catch: while Tailwind reduces the friction of styling, it doesn’t remove cognitive load entirely. You still have to remember what each utility class does—and they’re all based on CSS properties. So to really use Tailwind well, you still need a solid understanding of CSS fundamentals.
And that, to me, is the conundrum.
I was only able to design this site the way I wanted because I already knew how CSS works. Sure, someone new to web development could use Tailwind without ever touching a traditional stylesheet. But eventually, they’ll run into limitations or edge cases that require deeper knowledge. Because at the end of the day,
Tailwind is just a smart abstraction, a wrapper around core CSS concepts.
Melvyn Phillips
So while I appreciate the speed and flexibility Tailwind offers, I wouldn’t recommend skipping the basics. Learn CSS first. Then use Tailwind as a power tool—not a crutch.
Final Thoughts
Tailwind CSS surprised me. As someone who’s spent over 20 years writing CSS by hand, I didn’t expect to enjoy using a system that puts class names all over my markup. But the truth is—it worked. It made development faster, more visual, and in some ways, more fun.
Still, I wouldn’t trade my CSS knowledge for anything. Tailwind helped me move faster because I understood what was happening underneath. It’s a tool, not a replacement. And like any tool, its power depends on the person using it.
If you’re new to web development, I’d still recommend starting with the basics. Understand how CSS works—its strengths, quirks, and power. Then, if you want to experience building with speed, reach for Tailwind.
I’ve made peace with utility-first CSS. Not because it replaces what I know—but because it builds on it.