The CSS purge estimator scans your compiled stylesheet against representative HTML or template snippets, highlighting unused selectors and building a safelist you can drop into PurgeCSS or similar pipelines.
Pre-flight PurgeCSS runs
Check selector coverage before you commit a purge config.
Template audits
See which classes and IDs are actually used across your markup samples.
Safelist planning
Assemble a safelist for dynamic states, feature flags, or JS-injected classes.
Quick start
- Open the CSS purge estimator and paste your built CSS on the left.
- Add representative HTML or template snippets in the content input.
- Optional: list safelist tokens (one per line or comma-separated) for classes or selectors you must keep.
- Submit to see coverage, unused selectors, and safelist-ready tokens you can copy.
Supported inputs
- Accepts compiled CSS (comments stripped automatically for scanning).
- HTML/template input is parsed for class, id, and tag tokens in a case-insensitive pass.
- Safelist supports raw selectors plus class/id tokens (e.g., ".btn-primary" or "modal-open").
Detailed walkthroughs
Scan CSS against markup
- Paste your CSS and HTML/template samples into the form.
- Submit to generate coverage metrics and a selector-by-selector status.
- Sort through the list to see which selectors are used, unused, or safelisted.
Build a safelist
- Add dynamic classes, data-state selectors, or framework utilities to the safelist input.
- Resubmit to mark those selectors as protected, even if they do not appear in the content sample.
- Copy the safelist tokens to drop into your purge configuration.
Export unused selectors
- After submission, use the Copy helpers to grab the unused selectors list.
- Paste into PRs or tickets to highlight dead CSS candidates.
- Iterate by updating content samples to confirm whether a selector is truly unused.
Feature deep-dives
- Selector scan trims pseudo-classes/elements before matching so stateful selectors still register.
- Content tokenization captures classes, IDs, and tags across your pasted HTML or template snippet.
- Safelist honors full selectors plus individual class/id tokens to cover JS-injected states.
- Copy helpers export unused selectors and safelist tokens as newline-separated lists.
Field notes / Pro tips
- Paste built CSS, not source files, to mirror what PurgeCSS will see.
- Include one or two representative templates per route or layout for realistic coverage.
- Safelist common framework states (e.g., "dark", "open", "prose") before running production purges.
- Pair with the Code Beautifier if you want a prettified stylesheet before scanning.
- Visit the docs hub to find related guides for HTML/CSS workflows.
Need a companion workflow? Pair this guide with the Code Beautifier or Slugify helper to tidy markup before you purge. You can always jump back to the documentation hub or open the live tool from the “View documentation” link inside the CSS purge estimator hero.