PurgeCSS

PurgeCSS removes unused CSS from your project's files. It analyzes your content and CSS files to determine which styles are actually used, then eliminates the rest. This tool is designed for web developers who want to reduce CSS file size in production builds, offering a more targeted approach than manual cleanup or generic minification.

Key Benefits

• Reduces CSS file size by removing selectors that do not match any content in your HTML, templates, or JavaScript.
• Integrates directly into popular build pipelines through plugins for PostCSS, Webpack, Gulp, and Grunt.
• Supports major front-end frameworks including Vue.js, Nuxt.js, React.js, Next.js, Razzle, WordPress, and Hugo.
• Provides a safelisting mechanism to preserve specific selectors you want to keep regardless of content analysis.
• Allows custom extractors to handle CSS usage detection in non-standard file types or template syntaxes.

How It Works

You point PurgeCSS at your content files (HTML, JS, templates) and your CSS files. It builds a list of selectors used in the content, then compares that list against all selectors in your CSS. Any selector not found in the content gets stripped from the final output. You can configure the tool via a configuration file, command-line interface, or programmatic API.

Use Cases

• Front-end developers using PostCSS who want to automate unused CSS removal as part of their build step.
• Webpack users who need a leaner production bundle without dead CSS selectors bloating the output.
• Gatsby and Next.js site owners looking to reduce the CSS payload shipped to visitors.
• Vue.js and React.js developers who write component-scoped styles and want to eliminate global CSS leftovers.
• WordPress theme developers who inherit large CSS frameworks and need to strip unused utility classes.
• Hugo static site builders who want minimal CSS output for faster page loads.

Why Choose This Product

PurgeCSS is best suited for developers already using a build tool such as Webpack, Gulp, or PostCSS who want a configurable, automated way to remove dead CSS. It supports safelisting and custom extractors for edge cases, though you must verify that dynamically generated class names in your JavaScript are caught by your extractors or safelisted explicitly.