What's PurgeCSS?
PurgeCSS removes unused CSS rules from your stylesheets to reduce their size and therefore speed up page-loads.
It's very important that you configure this tool correctly, or it will remove CSS rules that you need!
Enabling PurgeCSS
First, make sure you've read Setting Language Options.
PurgeCSS is available for Sass, Less, Stylus, and regular CSS files. Select one of those files, then click the "Purge Unused CSS Rules" pop-up button:
You can also turn on PurgeCSS for all files at once. Open Project Settings, choose one of the languages above, then click the "Purge Unused CSS" pop-up button.
Build Environments
Along with "always" and "never", you can set PurgeCSS to run only when your project's Build Environment is set to "Production" or "Development". You can change this environment in Project Settings > General.
(Using the Build Environment options lets you rapidly toggle various tools on and off all at once simply by changing the environment.)
PurgeCSS Options
Open Project Settings > PurgeCSS to adjust settings:
Critical: Pages To Scan
This list MUST contain every type of file where you use CSS rules. PurgeCSS will look only in these files to decide if each rule is used or not. If you use a custom filetype and forget to add it to this list, PurgeCSS may remove rules you need in your final CSS!
Follow the pattern to add your own entries. The **/*.html means "look in every subfolder for any file with an 'html' extension and scan it".
Skipped Content
If you need to exclude certain folders, use this list. The default entry node_modules/** will prevent PurgeCSS from scanning files of any type in (and below) the "node_modules" folder.
Safe & Block Lists
These lists let you tell PurgeCSS to always keep or delete a certain rule, regardless of whether it's used or not.
Each entry can be a string (class name, ID, element name, etc.) or regex pattern.
Danger: Things to Know
PurgeCSS is deliberately naive when scanning for used CSS rules. It would be too slow to parse and run each file, so PurgeCSS simply looks for the text of each rule. This means if you do "clever" things with CSS rules in your JavaScript (such as combine different parts of a rule's name instead of using the full name all in one string), PurgeCSS may not detect that a rule is used by your script.
For details, read the official PurgeCSS Documentation.
FAQs
PurgeCSS matches the CSS selectors used in your HTML elements with those in stylesheets. Then, it automatically removes all unused rules, producing smaller CSS files. Since the default behavior may produce undesired results, it is highly customizable and supports many options.
How to remove unused CSS? ›
How to manually remove unused CSS
- From the Show Coverage option, select a CSS file. ...
- Then, click on CSS Overview:
- Next, click on Capture Overview, and you'll be presented with the CSS overview page, as shown below:
- On this page, navigate to the Unused declarations option, and you'll be shown the page in the image below:
You can specify content that should be analyzed by PurgeCSS with an array of filenames or globs open in new window. The files can be HTML, Pug, Blade, etc. PurgeCSS also works with raw content. To do this, you need to pass an object with the raw property instead of a filename.
How to remove unused CSS in Angular? ›
In angular material, color="primary" changed to mat-primary in runtime. Post-build (PurgeCss), All the mat classes are removed from styles. css which are not used in any of the HTML/js files.
Is PurgeCSS good? ›
Modularity enables developers to create module extractors for specific use cases and frameworks. An extractor is a function that reads the contents of a file and extracts a list of CSS selectors that are used. PurgeCSS provides a very reliable default extractor that can work with a wide range of files types.
What is the alternative to PurgeCSS? ›
As mentioned before, there are 2 alternatives to PurgeCSS: UnCSS & PurifyCSS.
Should I remove unused CSS? ›
CSS rules are one of the most common sources of site bloat. Removing unused CSS on WordPress sites improves speed and performance. If you ran a performance audit of your site through PageSpeed Insights, you may have come across the “Reduce unused CSS” (previously “Remove unused CSS”) recommendation.
How do I remove unused CSS asset CleanUp? ›
Asset cleanup is a plugin that helps you to reduce unused CSS to improve the WordPress website's pagespeed. First, it will fetch the homepage and will show you all CSS files loaded on that page. You need to review all loaded files. If you find any files that you don't need then you need to unload that file.
What is the extension to remove unused CSS? ›
Here are the two easy plugins to be able to remove unused CSS that is loading on your WordPress website.
- Core Web Vitals & PageSpeed Booster. Core Web Vitals & PageSpeed Booster – WordPress plugin. ...
- Asset Cleanup. Asset CleanUp: Page Speed Booster – WordPress Plugin.
This example shows how to set up PurgeCSS with create-react-app template.
- Method 1 - Use craco. Custom PostCSS plugins (including PurgeCSS) can be added to Create React App apps using craco. ...
- Method 2 - Run PurgeCSS CLI in postbuild. Add the following code in package.json.
- Method 3 - eject create-react-app.
Removing all unused styles
By default, Tailwind will only remove unused classes that it generates itself, or has been explicitly wrapped in a @layer directive. It will not remove unused styles from third-party CSS you pull in to your project, like a datepicker library you pull in for example.
How to find unused CSS in Visual Studio Code? ›
Open the Coverage tool
- To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). ...
- In DevTools, open the Command Menu. ...
- Start typing coverage, press the Down Arrow key to highlight the Show Coverage command, and then press Enter:
PurgeCSS is a tool to remove unused CSS. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools. Here are a couple of ways to use PurgeCSS: CLI.
How do I remove an existing CSS? ›
setProperty() method can be used to set the required property of the style. The element of which the property has to be removed is selected and this property is applied to its style property. Setting this property to 'initial' resets the property to its initial value, removing any effect of the property.
How do I remove unused CSS from Chrome? ›
Chrome DevTools Coverage panel for unused JS and CSS
- Open Chrome DevTools. Control + Shift + I. ...
- Open the Command Menu. Control + Shif t +P. ...
- Type + click the following: "Show Coverage"
- Click the reload button to reload the page and to see which code is loaded.
- Then double click on the JS or CSS file that you want to unminify.
This example shows how to set up PurgeCSS with create-react-app template.
- Method 1 - Use craco. Custom PostCSS plugins (including PurgeCSS) can be added to Create React App apps using craco. ...
- Method 2 - Run PurgeCSS CLI in postbuild. Add the following code in package.json.
- Method 3 - eject create-react-app.
The problem of unused CSS
For example, Tailwind uses PurgeCSS to remove unused CSS from final builds automatically. Netflix Top 10 uses Tailwind on its entire website and only requires 6.5kB for the CSS file. The CSS file would be ten times the final build size without removing unused CSS.
Does Webpack remove unused CSS? ›
Remove unused CSS using uncss in Webpack. This plugin is an alternative to using UnCSS with postcss-loader . Running UnCSS as a loader has a few drawbacks: There is no way to obtain the HTML files in the pipeline, hence you can only run UnCSS against HTML files on disk.
