CSS Coverage and Unused Styles

Large CSS files often contain styles for components not present on the current page. Every unused byte increases parse time, CSSOM construction time, and transfer size. A typical production app may have 90% or more unused CSS on any given page.

Open DevTools → Coverage panel (Cmd+Shift+P → Coverage). Start recording, interact with the page, then stop. The panel shows each CSS file with percentage used and highlights unused rules in red. Export coverage data as JSON for analysis.

PurgeCSS scans your HTML, JS, and template files for class names and removes unused CSS rules. Configure content globs to match all files that could reference class names. Safelist classes used dynamically (added by JS) to prevent accidental removal.

Tailwind's JIT compiler generates only the utility classes actually used in your templates. The resulting CSS is tiny — often 5-15KB for a full application — because unused utilities are never generated. This is the ideal purge outcome.

In a webpack or Vite config, add PurgeCSS with content globs covering all template files. The safelist option accepts strings, regex, and deep-safelist for complex dynamic class patterns from libraries like Headless UI.

CSS Modules generate unique class names per file and tree-shake unused modules with bundler configuration. Only imported CSS modules are included in the bundle — component co-location naturally eliminates global unused styles.

Code-split CSS by route in frameworks like Next.js (per-page CSS extraction) or use dynamic imports with CSS modules. Each page loads only its own styles, making coverage analysis per-page rather than per-application meaningful.

Lighthouse "Reduce unused CSS" audit estimates potential byte savings from removing unused rules. It identifies specific stylesheet resources with high unused percentages. Use it as a prioritization guide for which files to audit first.

Coverage analysis only captures states visible during recording. Hover states, modal open states, error states, and authenticated states must be manually triggered during coverage recording to avoid incorrectly purging their styles.

Monolithic global stylesheets accumulate unused CSS over time as features are removed. Per-component CSS (CSS Modules, Styled Components, Tailwind utilities) is easier to prune because styles live with their components and are removed together.

For large legacy CSS files: use UnCSS or PurgeCSS in report-only mode first. Sort rules by usage frequency. Extract and delete clearly unused vendor plugin styles. Work incrementally to avoid accidentally removing styles for edge-case states.

What does the Chrome DevTools Coverage panel measure?

CSS coverage analysis with DevTools Coverage and Lighthouse identifies unused rules. PurgeCSS and Tailwind JIT automate dead code elimination. CSS Modules and per-route splitting prevent unused style accumulation. Together they minimize CSS payload and parse time.