# Gatsby

TIP

This plugin has been created by @anantoghosh(opens new window) and this page is an extract from the ReadMe. You can find more information on the plugin repository(opens 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.(opens new window) Changelog(opens new window)

# Demo

When used in gatsby-starter-bootstrap(opens new window)

demo

When used in gatsby-starter-bootstrap-cv(opens 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