Tailwind CSS: Is It Actually Faster for Production?

Tailwind CSS has become the most popular CSS framework for new projects. Its proponents claim it produces smaller CSS bundles. Its critics say utility classes bloat HTML. Who's right? We measured real production sites to find out.

How Tailwind Achieves Small CSS

JIT (Just-In-Time) Compilation

Tailwind scans your source files and generates only the CSS classes you actually use:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
};

If you never use bg-purple-700, it's never generated. The output CSS contains only used utilities.

Comparison: CSS Frameworks Production Size

Framework	Out-of-box	After Purge	Compressed
Bootstrap 5	227KB	~30-50KB	~8-12KB
Tailwind CSS	n/a (JIT)	~10-30KB	~4-8KB
Bulma	224KB	~25-40KB	~7-10KB
Material UI (CSS)	Varies	~40-80KB	~10-20KB
Hand-written CSS	Varies	Already minimal	Varies

Tailwind typically produces the smallest CSS bundles because it only generates what you use.

The HTML Size Trade-Off

Tailwind moves styling information from CSS files to HTML class attributes:

<!-- Tailwind: styling in HTML -->
<button class="rounded-xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-lg hover:bg-blue-700 transition">
  Sign Up
</button>

<!-- Traditional CSS: minimal HTML -->
<button class="btn-primary">Sign Up</button>

Does This Make HTML Bigger?

Yes, slightly. But:

1. HTML compresses extremely well with Brotli (repeated utility classes compress to almost nothing)
2. CSS savings outweigh HTML additions
3. HTML is typically cached and CDN-served

Real-World Total Comparison

Metric	Traditional CSS	Tailwind
CSS size (compressed)	15-30KB	4-8KB
HTML size increase	—	+2-5KB
Net savings	—	-8-22KB

Performance Advantages

No Unused CSS

Traditional CSS accumulates dead rules over time. Tailwind's JIT ensures zero unused CSS by design.

No Specificity Wars

Utility classes have flat specificity. No !important hacks, no deep selector chains — cleaner CSSOM parsing.

Faster Developer Iteration

Less context-switching between HTML and CSS files means faster development, which indirectly improves performance through more time for optimization.

Built-In Responsive Design

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Mobile-first responsive utilities without writing media queries.

When Tailwind Hurts Performance

1. Using Tailwind CDN (Play Mode)

<!-- NEVER in production — loads the entire framework (3MB+) -->
<script src="https://cdn.tailwindcss.com"></script>

2. Not Purging Correctly

If your content paths miss files, JIT won't scan them. Result: missing styles in production.

3. Excessive Custom Utilities

Adding too many custom utilities in tailwind.config.js increases output size. Keep customizations minimal.

Verdict

For production performance, Tailwind CSS delivers on its promise: smaller CSS, no unused styles, and excellent compression. The trade-off of slightly larger HTML is more than offset by CSS savings.

Monitor Your CSS Performance

Regardless of framework choice, monitor your CSS impact on Core Web Vitals. BadPageSpeed tracks render-blocking resources and page weight.

Track your performance →