Why I Switched to Tailwind CSS and Never Looked Back.

The Initial Skepticism

When I first heard about Tailwind CSS, I was skeptical. Writing styles directly in HTML? That sounded like going back to inline styles, which we'd all agreed was bad practice. I'd spent years learning CSS architecture, BEM methodology, and organizing stylesheets. Why would I throw that away?

But after building a few projects with Tailwind, I realized I had it all wrong. It wasn't about abandoning good practices—it was about a different way of thinking about styling that actually made more sense for modern web development.

What Changed My Mind

The turning point came when I was building this portfolio. I needed to create responsive layouts, implement dark mode, and ensure everything looked consistent. With traditional CSS, I'd spend hours writing media queries, creating custom classes, and managing a growing stylesheet.

With Tailwind, I found myself moving faster. Not because I was writing less code—honestly, sometimes there's more—but because I wasn't context-switching between files. I could see exactly what styles were applied right there in the component. No more hunting through CSS files wondering where a style came from.

1// Before: Separate CSS file
2.card {
3  display: flex;
4  flex-direction: column;
5  padding: 1.5rem;
6  background: white;
7  border-radius: 0.5rem;
8  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
9}
10
11.card:hover {
12  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
13}
14
15@media (min-width: 768px) {
16  .card {
17    flex-direction: row;
18  }
19}
20
21// With Tailwind: Right there in the component
22<div className="flex flex-col md:flex-row p-6 bg-white rounded-lg shadow-sm hover:shadow-md">
23  {/* content */}
24</div>

The Real Benefits

What I love most about Tailwind isn't the speed—though that's nice. It's the consistency. When I use `p-4`, I know it's always 1rem of padding. When I use `text-primary-base`, I know it matches my design system. There's no guessing, no inconsistencies, no 'wait, did I use padding-16 or padding-large here?'

Dark mode became trivial. Instead of writing separate stylesheets or complex CSS variables, I just add `dark:` variants. The same component works in both themes without any extra effort. It's elegant.

1<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6 rounded-lg">
2  <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-200">
3    This Just Works
4  </h2>
5  <p className="text-gray-600 dark:text-gray-400">
6    No separate stylesheets needed.
7  </p>
8</div>

The Learning Curve

I won't lie—there was a learning curve. The class names felt verbose at first. But after a few weeks, I stopped thinking about the classes and started thinking about the design. The utility classes became muscle memory, like typing.

The Tailwind IntelliSense extension helped tremendously. Having autocomplete for all the utilities meant I didn't need to memorize everything. I could discover new utilities as I needed them.

What I Still Use Custom CSS For

I'm not dogmatic about it. There are still times when custom CSS makes sense. Complex animations, unique layouts that don't fit Tailwind's model, or when I need to style third-party components that I can't modify directly.

But for 90% of what I build, Tailwind covers it. And when I do need custom CSS, I use Tailwind's `@apply` directive or add it to my global styles. The best part? I'm not fighting against Tailwind—it's designed to work alongside custom CSS when needed.

1// Custom animation that doesn't fit Tailwind's model
2@keyframes customSlide {
3  from {
4    transform: translateX(-100%) rotate(-5deg);
5  }
6  to {
7    transform: translateX(0) rotate(0deg);
8  }
9}
10
11.custom-animation {
12  animation: customSlide 0.5s ease-out;
13}
14
15// Still use Tailwind for everything else
16<div className="p-6 bg-white rounded-lg custom-animation">
17  Content here
18</div>

The Migration Experience

When I migrated this portfolio to Tailwind CSS v4, I was worried about breaking changes. But the migration was smoother than expected. The new CSS-first configuration made sense, and having everything in one place (globals.css) actually simplified things.

The biggest win? No more `tailwind.config.ts` file cluttering my project. Everything is defined in CSS using `@theme`, which feels more natural. Colors, spacing, fonts—all in one place, easy to find and modify.

Why It Works for Me

Tailwind CSS fits how I work. I think in terms of components, not stylesheets. When I'm building a button component, I want to see all its styles right there. When I'm adjusting spacing, I want to do it inline, not jump to another file.

It's not for everyone, and that's okay. Some developers prefer the separation of concerns that traditional CSS provides. But for me, Tailwind has made styling more enjoyable and less frustrating. I spend less time fighting CSS and more time building features.

Final Thoughts

If you're on the fence about Tailwind CSS, my advice is simple: try it on a small project. Don't try to migrate everything at once. Build something new with it, see how it feels, and decide if it fits your workflow.

For me, it's become an essential tool. It's not perfect—no tool is—but it's made me more productive and my code more maintainable. And honestly, that's what matters most.