Gatsby

TIP

This plugin has been created by @anantoghoshopen in new window and this page is an extract from the ReadMe. You can find more information on the plugin repositoryopen in new window

You can remove unused css from css/sass/less/stylus files and modules in your Gatsby project using PurgeCSS. Supports tailwind, bootstrap, bulma etc.

WARNING

This is NOT an install and forget type plugin. By default, it may remove required styles too.

📘 Read the latest docs here.open in new windowChangelogopen in new window

Demo

When used in gatsby-starter-bootstrapopen in new window

demo

When used in gatsby-starter-bootstrap-cvopen in new window (installed by default)

demo

Supported files

Installation

npm i gatsby-plugin-purgecss
1

Usage

Add the plugin AFTER other css/postcss plugins

// gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Add after these plugins if used
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

TLDR