Question 1

How to set up next-purgecss with Next.js and Sass?

Accepted Answer

Install next-sass and next-purgecss as dev dependencies, then wrap them in your next.config.js file using withSass and withPurgeCss. The README provides an example with next-css, which works similarly for Sass by replacing the plugin.

Question 2

next-purgecss or using PurgeCSS directly – which is better for Next.js?

Accepted Answer

next-purgecss simplifies integration by handling Webpack configuration automatically, whereas direct PurgeCSS setup offers more control but requires manual tweaking. For most Next.js projects, next-purgecss is easier if you're already using compatible CSS plugins.

Question 3

How to whitelist CSS classes in next-purgecss?

Accepted Answer

Use the purgeCss option in next.config.js to define a whitelist array or function, as shown in the README. For example, set whitelist: ['my-class'] to prevent specific classes from being removed during optimization.

Question 4

Does next-purgecss work with CSS-in-JS like Emotion?

Accepted Answer

No, it's not ideal because CSS-in-JS libraries generate styles dynamically at runtime, which PurgeCSS may not detect. This can lead to incorrect style removal, so alternative optimization methods are recommended for such setups.

Question 5

Why are my styles broken after adding next-purgecss?

Accepted Answer

This often happens due to over-purging from unconfigured paths or missing whitelists. Check your purgeCssPaths and add necessary classes to the whitelist option in next.config.js to preserve dynamic or critical styles.

Question 6

How to disable next-purgecss in development mode?

Accepted Answer

Configure the purgeCssEnabled option in next.config.js to return false for dev environments. The README example shows setting it to (!dev && !isServer) to run only in production client-side builds, speeding up development.

Next PurgeCSS

What is Next PurgeCSS?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions