​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:
You can install the CLI in two ways. By installing PurgeCSS globally or using npx.
npm i -g purgecss
Run PurgeCSS from the terminal:
purgecss --css <css> --content <content> [option]
​npx allows you to run the CLI locally without installing the package globally.
Install PurgeCSS as a dev dependency:
npm i -D purgecss
Run PurgeCSS from the terminal:
npx purgecss --css <css> --content <content> [option]
Install PurgeCSS as a dev dependency:
npm i -D purgecss
import Purgecss from 'purgecss'const purgecss = new Purgecss({content: ['**/*.html'],css: ['**/*.css']})const purgecssResult = purgecss.purge()
var Purgecss = require('purgecss')var purgecss = new Purgecss({content: ['**/*.html'],css: ['**/*.css']})var purgecssResult = purgecss.purge()
Install the Webpack plugin as a dev dependency:
npm i -D purgecss-webpack-plugin
Use the plugin in your Webpack config:
const path = require('path')const glob = require('glob')const ExtractTextPlugin = require('extract-text-webpack-plugin')const PurgecssPlugin = require('purgecss-webpack-plugin')​const PATHS = {src: path.join(__dirname, 'src')}​module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader?sourceMap'})}]},plugins: [new ExtractTextPlugin('[name].css?[hash]'),new PurgecssPlugin({paths: glob.sync(`${PATHS.src}/*`)})]}
Install the PostCSS plugin as a dev dependency:
npm i -D @fullhuman/postcss-purgecss
Use the plugin in your PostCSS config:
const purgecss = require('@fullhuman/postcss-purgecss')​module.exports = {plugins: [purgecss({content: ['./**/*.html']})]}
Install the Gulp plugin as a dev dependency:
npm i -D gulp-purgecss
Use the plugin in your Gulpfile:
const gulp = require('gulp')const purgecss = require('gulp-purgecss')​gulp.task('purgecss', () => {return gulp.src('src/**/*.css').pipe(purgecss({content: ['src/**/*.html']})).pipe(gulp.dest('build/css'))})
Install the Grunt plugin as a dev dependency:
npm i -D grunt-purgecss
Use the plugin in your Gruntfile:
module.exports = grunt => {​grunt.initConfig({purgecss: {options: {content: ['./src/**/*.html']},my_target: {files: {'./dist/app.purged.css': './src/app.css'}}}})​grunt.loadNpmTasks('grunt-purgecss')grunt.registerTask('default', ['purgecss'])}
Install the Rollup plugin as a dev dependency:
npm i -D rollup-plugin-purgecss
Use the plugin in your Rollup config:
import { rollup } from 'rollup'import purgecss from 'rollup-plugin-purgecss'​rollup({entry: 'main.js',plugins: [purgecss({content: ['index.html']})]})