How to reduce unused CSS and eliminate render-blocking stylesheets

Removing Unused CSS

Unused CSS increases stylesheet download time and CSSOM construction time. A typical Tailwind CSS build without purging is 3–4MB; with purging it's under 10KB for most sites.

Use the DevTools Coverage tab to measure unused CSS before optimizing. Red bars indicate unused rules.

PurgeCSS scans your HTML, JS, and templates and removes any CSS selectors that don't appear:

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.html', './src/**/*.jsx'],
      safelist: ['active', 'hidden', /^animate-/] // never purge these
    })
  ]
};

Tailwind CSS handles purging automatically in production via its content config:

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

For async stylesheet loading (non-critical styles):

<link rel="stylesheet" href="/styles/non-critical.css"
  media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/styles/non-critical.css"></noscript>

The trick: media="print" makes the browser download without blocking render. The onload changes media to all, applying styles once loaded.