Key takeaways
- Tailwind CSS is a utility-first framework: you style elements with small classes like
p-4 rounded-lg bg-white. - Custom CSS (with variables and a few components) gives full control and clean HTML, which suits themes and content sites.
- Both can be fast. The right choice depends on team, project type and how the site will be edited.
“Should we use Tailwind?” comes up in almost every new web app or SaaS project I plan. There’s no universal answer, but there are clear patterns. Here’s an honest comparison from building both WordPress themes and React dashboards.
The same button, two ways#
Tailwind:
<a class="inline-flex items-center gap-2 rounded-full bg-lime-400 px-5 py-3 font-semibold text-gray-900 hover:-translate-y-0.5">
Get started
</a>Custom CSS:
<a class="btn btn--primary">Get started</a>
.btn { display: inline-flex; align-items: center; gap: .5em; border-radius: 999px; padding: 12px 22px; font-weight: 600; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { transform: translateY(-1px); }Comparison#
| Tailwind | Custom CSS | |
|---|---|---|
| Speed of building UI | Very fast once learned | Fast with a good design system |
| HTML readability | Long class lists | Clean, semantic class names |
| Consistency | Enforced by the design scale | Depends on discipline and variables |
| CSS file size | Small — unused utilities removed at build | Small if maintained; grows if not |
| Build step | Required | Optional |
| Theming (dark mode, brand swap) | Supported (variants, CSS variables) | Natural with CSS variables |
| Editor-friendly (WordPress content) | Awkward for content authors | Easy: authors use simple classes or blocks |
| Component frameworks (React/Vue) | Excellent fit | Works well with CSS Modules |
When I choose Tailwind#
- React, Next.js or Vue apps, SaaS dashboards and admin tools.
- Teams with several developers who need consistent spacing and colours without debating names.
- Prototypes and MVPs where speed matters most — see MVP development.
- Projects using component libraries built on Tailwind (shadcn/ui and similar).
Need a hand with this?
Get a quick, honest review of your website’s SEO.
When I choose custom CSS#
- WordPress themes, where editors add content and HTML should stay clean.
- Content sites and blogs with a small number of distinct components.
- Projects without a build pipeline, or long-lived sites maintained by different people over years.
- When performance budgets are tight and every request counts (this theme is plain CSS with variables).
Performance reality#
Both approaches can produce small CSS. Tailwind’s build removes unused utilities; a disciplined custom stylesheet can be just as lean. The real performance risks are elsewhere: shipping Tailwind via the CDN “play” script in production (don’t), or letting custom CSS grow unchecked over years. See CSS performance tips.
A middle path#
Many teams combine both: design tokens as CSS variables, Tailwind for layout and spacing utilities, and a few semantic component classes (.btn, .card) extracted for repeated patterns. Whatever you choose, document the design tokens — colours, spacing, radius, typography — so the UI stays consistent.
Tailwind vs custom CSS FAQ#
Is Tailwind bad for SEO?#
No. Search engines don’t care how CSS is written. Performance and HTML structure matter, and both approaches can do well.
Can I use Tailwind in WordPress?#
Yes, with a build step in a custom theme. It’s less convenient for content edited in the block editor.
Is Bootstrap still a good choice?#
It’s fine for quick admin interfaces, but most modern projects prefer Tailwind or custom CSS for lighter, more distinctive designs.