Removing Unused CSS With PurgeCSS#

Initializing a Next.js Project#

First, I created a new Next.js app using the following command:

npx create-next-app@latest

I followed the prompts and named my project purge-css-next-js-demo. I also opted to use TailwindCSS for styling. Once my app was ready, I added Bootstrap as an example framework:

npm install bootstrap

I then imported Bootstrap in my layout.js file:

import "bootstrap/dist/css/bootstrap.css";

Finally, I set up a simple homepage to test the setup:

export default function HomePage() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <h1>Welcome to My Website</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <button className="btn btn-primary">Learn More</button>
        </div>
      </div>
    </div>
  );
}

Installing PurgeCSS#

Next, I installed the PostCSS plugin for PurgeCSS:

npm install --save-dev @fullhuman/postcss-purgecss

Since configuring PostCSS disables Next.js’s default behavior, I also installed additional plugins to restore it:

npm install postcss-flexbugs-fixes postcss-preset-env

Configuring PurgeCSS#

I created a postcss.config.js file in my project’s root directory with the following configuration:

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009"
        },
        stage: 3,
        features: {
          "custom-properties": false
        }
      }
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: ["./src/app/**/*.{js,jsx,ts,tsx}"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: {
          standard: ["html", "body"]
        }
      }
    ]
  ]
};

This setup ensures that PurgeCSS scans my files for used CSS and removes everything else. I also added a safelist to preserve essential selectors like html and body.