Purgecss
  • Introduction
  • Configuration
  • CLI
  • JavaScript API
  • With Webpack
  • With PostCSS
  • With Gulp
  • With Grunt
  • With Rollup
  • Whitelisting
  • Extractors
  • Comparison
  • Guides
    • React
    • Vue
    • Next
    • Nuxt
    • Wordpress
Powered by GitBook
On this page
  • Module
  • Installation
  • 1. Install the packages
  • 2. Edit next.config.js.
  • Options
  1. Guides

Next

PreviousVueNextNuxt

Last updated 5 years ago

Module

To simply configure PurgeCSS with next.js, you can use .

Installation

1. Install the packages

next-purgecss requires one of the following css next plugins :

Just pick the one that fits your needs. In the following steps, I will use next-css but it works the same for the other css next plugins.

For example, install next-css and next-purgecss :

yarn add @zeit/next-css next-purgecss --dev

or with npm :

npm install @zeit/next-css next-purgecss --save-dev

2. Edit next.config.js.

// next.config.js
const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')

module.exports = withCss(withPurgeCss())

Options

By default, this plugin will scan components and pages directories for classnames.

Under the hood, next-purgecss uses the PurgeCSS Webpack Plugin. You can pass custom options to the plugin by defining purgeCss object in your next.config.js :

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCss: {
      whitelist: () => ['my-custom-class']
    }
  })
)

See the page dedicated to the for more information.

next-purgecss
next-css
next-less
next-sass
PurgeCSS Webpack Plugin