How to use @fullhuman/postcss-purgecss - 4 common examples

import path, { join } from 'path'
import { Configuration } from '@nuxt/types'
import Sass from 'sass'
import Purgecss from '@fullhuman/postcss-purgecss'
import _ from 'lodash'
import pkg from './package.json'
import { nav } from './config'

const purgecss = Purgecss({
  // Specify the paths to all of the template files in your project
  content: [
    './pages/**/*.html',
    './pages/**/*.vue',
    './components/**/*.vue',
    './components/**/*.jsx',
    // etc.
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content: string) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
  whitelist: ['html', 'body', 'nuxt-progress'],
  whitelistPatternsChildren: [/^token/, /^pre/, /^code/, /^line-numbers-wrapper/, /^line-number/],
})

// console.log(posts)

import purgecss from '@fullhuman/postcss-purgecss';
import presetenv from 'postcss-preset-env';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

const PROD = process.env.NODE_ENV === 'production';
const plugins = [];

if (PROD) {
  // Purge unused CSS rules
  // https://tailwindcss.com/docs/controlling-file-size
  plugins.push(
    purgecss({
      content: ['./client/**/*.tsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?

tailwind(tailwindConfigFile),
      postcssNested,
    ];

    // Add more plugins when building
    if (!this.isProduction()) {
      return plugins;
    }

    // Only keep classes used in files at the same level
    let pathLevel = path.dirname(path.relative('./src', tailwindConfigFile));
    if (pathLevel === '..') {
      pathLevel = '';
    }
    plugins.push(
      postcssPurge({
        content: [`./docs/${pathLevel}/*.html`],
        whitelistPatterns: [/^ais-/, /^ats-/],
      })
    );

    plugins.push(autoprefixer);

    const cleanCssOptions = {
      level: {
        1: {
          specialComments: false,
        },
      },
    };

    plugins.push(postcssClean(cleanCssOptions));

tailwind(tailwindConfigFile),
      postcssNested,
    ];

    // Add more plugins when building
    if (!this.isProduction()) {
      return plugins;
    }

    // Only keep classes used in files at the same level
    let pathLevel = path.dirname(path.relative('./src', tailwindConfigFile));
    if (pathLevel === '..') {
      pathLevel = '';
    }
    plugins.push(
      postcssPurge({
        content: [`./dist/${pathLevel}/*.html`],
        // Always keep InstantSearch, TalkSearch and DocSearch classes
        whitelistPatterns: [/^ais-/, /^ats-/, /^ds-/],
      })
    );

    plugins.push(autoprefixer);

    const cleanCssOptions = {
      level: {
        1: {
          specialComments: false,
        },
      },
    };