Why I Switched to Tailwind CSS

After years of writing custom CSS and using Bootstrap, switching to Tailwind CSS was one of the best decisions I've made for my development workflow.

The Problem with Custom CSS

Custom CSS starts clean but inevitably becomes a mess. Naming things is hard (BEM helps but is verbose), dead code accumulates, and specificity wars begin.

Bootstrap's Limitations

Bootstrap is great for rapid prototyping, but every Bootstrap site looks... like Bootstrap. Customizing it beyond theme variables requires fighting the framework.

Why Tailwind Wins

Tailwind's utility-first approach means you style directly in your markup. No naming, no context switching, no unused CSS (thanks to purging). Combined with component extraction in React, it's incredibly productive.

// Before: context switching between files
// styles.css — .card { ... }
// Card.tsx — <div className="card">

// After: everything in one place
<div className="rounded-xl border bg-card p-6 shadow-sm">
  <h3 className="text-lg font-semibold">Title</h3>
</div>

The Learning Curve

Yes, there's a learning curve. Memorizing utility classes takes time. But autocomplete (Tailwind CSS IntelliSense) and the consistent naming convention make it surprisingly quick to pick up.

Key Takeaways

- Tailwind eliminates CSS naming and specificity problems

- Combined with components, you never repeat yourself

- The purging system means your production CSS is tiny

- It's not for everyone, but it solved real problems for me