Unused CSS is one of the most common and underappreciated causes of slow page loads, particularly on sites that use large CSS frameworks like Bootstrap or Tailwind. When you install Bootstrap, you’re loading tens of thousands of CSS rules, most of which your site never uses. PurgeCSS solves this by analysing your HTML, JavaScript, and template files to determine which CSS selectors are actually referenced, then producing a new stylesheet containing only those rules. The file size reduction can be dramatic. A Bootstrap stylesheet that starts at 180KB might come down to 15-20KB after purging.
PurgeCSS integrates with most modern build tools including webpack, Rollup, Gulp, and PostCSS. Setting it up takes some configuration, particularly when it comes to defining content sources so PurgeCSS knows which files to analyse. One common pitfall is purging CSS classes that are added dynamically via JavaScript. If PurgeCSS doesn’t see a class name in your static files, it will remove the corresponding styles, which can break parts of your interface at runtime. The safeguarding configuration using a safelist lets you protect specific selectors from being purged, which is the solution to this problem.
I think PurgeCSS is an essential step in any production build process for sites that use utility-first CSS frameworks. The performance gains are substantial and the tool is mature and well-maintained. It’s free and open source, which means you can inspect the code and use it however you like. The main investment is the initial configuration time, but once it’s set up in your build pipeline, it runs automatically and you don’t need to think about it again. For Tailwind CSS specifically, PurgeCSS-style purging is built in to the framework itself, which tells you how important the community considers this optimisation.