gatsby.md

title	lang	meta
Gatsby | PurgeCSS	en-US	name content description PurgeCSS can be used with Gatsby with the plugin gatsby-plugin-purgecss. itemprop content description PurgeCSS can be used with Gatsby with the plugin gatsby-plugin-purgecss. property content og:url https://purgecss.com/plugins/gatbsy property content og:site_name purgecss.com property content og:type website property content og:image https://i.imgur.com/UEiUiJ0.png property content og:locale en_US property content og:title Remove unused CSS - PurgeCSS property content og:description PurgeCSS can be used with Gatsby with the plugin gatsby-plugin-purgecss.

Gatsby

::: tip This plugin has been created by @anantoghosh and this page is an extract from the ReadMe. You can find more information on the plugin repository :::

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. • Changelog •

Demo

When used in gatsby-starter-bootstrap

When used in gatsby-starter-bootstrap-cv (installed by default)

Supported files

• .css , .module.css
• .scss, .sass, .module.scss, .module.sass (via gatsby-plugin-sass)
• .less, .module.less (via gatsby-plugin-less)
• .styl, .module.styl (via gatsby-plugin-stylus)

Installation

npm i gatsby-plugin-purgecss

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
      }
    }
  ]
};

TLDR

• Define options in gatsby-config.js, not purgecss.config.js.
• If using tailwindcss, use the tailwind: true option.
• Use printRejected: true option to print the removed selectors.
• Only files processed by Webpack will be purged.
• my-selector will not match mySelector.
• Whitelist required selectors or ignore files/folder using the Whitelist Solutions guide.
• Ignore complete packages with ignore: ['packagename/'].
• To only purge specific files/packages use purgeOnly: ['fileOrPackage/'].
• Only js, jsx, ts, tsx files are scanned for selectors by default. If you want to add md or mdx use content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')] or better, just whitelist the required selectors.