Meta tags:
author=Full Human;
keywords=purgecss, css, unused css, remove css, optimize css, tailwindcss, postcss, webpack, purge;
description=PurgeCSS is a tool to remove unused CSS from your project;

Headings (most frequently used words):

next, js, customize, postcss, configuration, plugin, installation, options, purgecssenabled, purgecsspaths, purgecss,

Text of the page (most frequently used words):
next (36), purgecss (21), the (18), #postcss (11), css (10), you (9), config (7), #configuration (7), module (6), for (6), custom (5), withpurgecss (5), exports (5), withcss (5), components (5), default (5), dev (5), use (5), plugins (5), will (4), purgecsspaths (4), plugin (4), can (4), your (4), and (4), that (4), purgecssenabled (4), install (4), languages (4), react (3), options (3), defining (3), other (3), pages (3), isserver (3), side (3), production (3), false (3), zeit (3), need (3), add (3), code (3), group (3), npm (3), body (3), html (3), content (3), with (3), api (3), nuxt (2), edit (2), this (2), warning (2), webpack (2), also (2), scan (2), change (2), client (2), during (2), server (2), compilation (2), true (2), boolean (2), mode (2), running (2), remove (2), build (2), function (2), require (2), const (2), yarn (2), item (2), one (2), following (2), safelist (2), jsx (2), tsx (2), features (2), autoprefixer (2), preset (2), env (2), flexbugs (2), fixes (2), sure (2), file (2), manually (2), customize (2), applications (2), how (2), github (2), français (2), english (2), reference (2), prev, matt, kempster, floriel, howard, dean, watts, denis, ffloriel, contributors, last, updated, page, overwrite, paths, list, available, are, documented, docs, class, whitelist, pass, object, folder, directories, classnames, only, enable, builds, development, start, description, type, argument, always, unused, regardless, environment, option, receives, two, arguments, once, installed, packages, save, example, just, pick, fits, needs, steps, but, works, same, sass, less, requires, installation, match, defaultextractor, fullhuman, properties, stage, 2009, flexbox, outer, document, containing, inside, nextjs, node, make, does, not, those, style, when, define, completely, disables, behavior, configure, all, compiled, including, any, included, create, root, project, using, framework, grade, scale, world, leading, companies, rendered, static, websites, more, ant, design, modules, common, questions, comparison, hugo, wordpress, razzle, vue, guides, gatsby, grunt, gulp, extractors, safelisting, programmatic, command, line, interface, getting, started, about,

Text of the page (random words):
next js purgecss purgecss api reference languages languages english français github api reference languages languages english français github purgecss about purgecss getting started configuration command line interface programmatic api safelisting extractors plugins postcss webpack gulp grunt gatsby guides vue react next js nuxt js razzle wordpress hugo comparison common questions how to use with css modules how to use with ant design next js next js is a react framework for production grade applications that scale the world s leading companies use next js to build server rendered applications static websites and more you can use purgecss with next js by using the postcss plugin in the next js configuration customize postcss configuration next js 9 3 to customize the postcss configuration create a postcss config js file in the root of your project warning when you define a custom postcss configuration file next js completely disables the default behavior be sure to manually configure all the features you need compiled including autoprefixer you also need to install any plugins included in your custom configuration manually i e npm install postcss flexbugs fixes postcss preset env by default the outer document containing html and body is inside nextjs node module add safelist html body to make sure purgecss does not remove those style add purgecss to the default configuration module exports plugins postcss flexbugs fixes postcss preset env autoprefixer flexbox no 2009 stage 3 features custom properties false fullhuman postcss purgecss content pages js jsx ts tsx components js jsx ts tsx defaultextractor content content match w g safelist html body next js plugin next js 9 3 installation next purgecss requires one of the following css next plugins next css next less next sass 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 code group code group item npm npm install zeit next css next purgecss save dev code group item yarn yarn add zeit next css next purgecss dev once you installed the packages you need to edit next config js next config js const withcss require zeit next css const withpurgecss require next purgecss module exports withcss withpurgecss options purgecssenabled by default next purgecss will always remove unused css regardless of build environment you can change that by defining a function for the purgecssenabled option the purgecssenabled function receives two arguments argument type description dev boolean true in development mode running next or false in production mode running next start isserver boolean true during server side compilation or false during client side compilation next config js module exports withcss withpurgecss purgecssenabled dev isserver dev isserver only enable purgecss for client side production builds purgecsspaths by default this plugin will scan components and pages directories for classnames you can change that by defining purgecsspaths next config js module exports withcss withpurgecss purgecsspaths pages components other components also scan other components folder purgecss you can pass custom options to purgecss by defining purgecss object in your next config js next config js module exports withcss withpurgecss purgecss whitelist my custom class the list of available options are documented in purgecss webpack plugin docs warning purgecss paths will overwrite purgecsspaths edit this page last updated 3 29 24 4 44 pm contributors ffloriel denis howard dean watts floriel matt kempster prev react next nuxt js