Tailwind vs Bootstrap
The CSS framework debate that never ends. One gives you building blocks. One gives you components. Both have angry defenders.
Tailwind
Tailwind won. Not because utility classes are objectively better, but because the ecosystem is better. Tailwind UI, shadcn/ui, Headless UI - the component libraries built on Tailwind are just nicer than Bootstrap's.
Different Philosophies
Tailwind gives you utility classes: `flex`, `p-4`, `text-lg`. You compose them into components. Your HTML gets verbose, but your CSS stays small.
Bootstrap gives you pre-built components: `.btn`, `.card`, `.navbar`. You use them as-is or override the CSS. Less HTML, more CSS customization.
Quick Comparison
| Factor | Tailwind | Bootstrap |
|---|---|---|
| Philosophy | Utility-first | Component-first |
| Learning Curve | Steeper initially | Easier to start |
| Customization | Extremely flexible | Theme variables |
| Bundle Size | Tiny (purged) | 30-50KB+ CSS |
| JavaScript | Optional/none | Required for components |
| Component Library | shadcn/ui, Headless UI | Built-in |
| Design System | Easy to create custom | Looks like Bootstrap |
| React/Vue Integration | Excellent | react-bootstrap exists |
Why Tailwind Won
The ecosystem. shadcn/ui changed the game. Copy-paste components that you own, styled with Tailwind, built on Radix primitives. Beautiful, accessible, customizable.
Tailwind sites don't look like Tailwind sites. Bootstrap sites look like Bootstrap sites. That's the difference.
"Every Bootstrap site shares the same DNA. Tailwind sites can look like anything, because you're not fighting pre-built opinions."
Why Bootstrap Isn't Dead
Bootstrap is still faster to prototype with. Drop in a navbar, some cards, a modal - it just works. No composing classes, no installing dependencies.
- Admin dashboards: Bootstrap themes are everywhere. Quick to set up, everyone knows them.
- Non-designers: Bootstrap's opinions help when you don't have opinions.
- Legacy projects: Millions of sites run Bootstrap. It's not going anywhere.
- jQuery integration: If you're still using jQuery, Bootstrap fits.
The Class Name Debate
Yes, Tailwind makes your HTML verbose. `className="flex items-center justify-between p-4 bg-zinc-800 rounded-lg"` is a lot.
But you're looking at one file. With Bootstrap, you're jumping between HTML and CSS files, hunting for `.my-custom-card-override-v2`. The verbosity is just in a different place.
With React/Vue components, you write the Tailwind classes once and reuse the component. Problem solved.
The Verdict
Use Tailwind if: You're building custom UI, care about bundle size, use React/Vue/Svelte, or want a unique design. This is most modern projects.
Use Bootstrap if: You need to prototype fast, are building admin dashboards, or your team already knows Bootstrap.
Consider neither if: You're building something tiny. Vanilla CSS is fine for small projects.
Tailwind with shadcn/ui or Headless UI is the modern stack. You get beautiful, accessible components without the Bootstrap look. It's won.