Performance

// purgecss.config.js
export default {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.ts',
    './src/**/*.tsx',
    './src/**/*.vue',
  ],
  safelist: [
    // State variants
    /-(hover|focus|active|disabled|visited|before|after)$/,
    // Screen reader utilities
    /^sr-only/,
    /^not-sr-only/,
    // RTL variants
    /^rtl-/,
    // Dark mode variants
    /^dark:/,
    // Animation classes
    /^animate-/,
    // Focus utilities
    /^focus-visible/,
    /^focus-within/
  ],
  extractors: [
    {
      extractor: (content) => {
        const matches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
        return [...new Set(matches)];
      },
      extensions: ['html', 'js', 'jsx', 'ts', 'tsx', 'vue']
    }
  ]
};

# Install PurgeCSS
npm install -D @fullhuman/postcss-purgecss

# Or with yarn
yarn add -D @fullhuman/postcss-purgecss

// postcss.config.js
import purgecss from '@fullhuman/postcss-purgecss';

export default {
  plugins: [
    // Other PostCSS plugins...
    purgecss({
      content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
      safelist: {
        standard: ['sr-only', 'not-sr-only'],
        deep: [/focus-visible/, /focus-within/, /dark:/, /animate-/],
        greedy: [/^rtl-/]
      }
    })
  ]
};

// Example: Safelist patterns for dynamic classes
const purgeCssPlugin = purgecss({
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  safelist: {
    // Standard classes to keep
    standard: [
      'sr-only',
      'not-sr-only',
      'skip-link'
    ],
    // Keep classes matching these patterns
    deep: [
      /focus-visible/,      // Keep all focus-visible utilities
      /focus-within/,       // Keep all focus-within utilities
      /dark:/,              // Keep dark mode variants
      /motion-reduce:/,     // Keep motion reduce utilities
      /contrast-/,          // Keep contrast utilities
      /rtl-/,               // Keep RTL utilities
      /animate-/            // Keep animation classes
    ],
    // Greedy patterns (more permissive)
    greedy: [
      /^theme-/,             // Keep theme classes
      /^data-theme/         // Keep data-theme attributes
    ]
  }
});

// vite.config.js
import { defineConfig } from 'vite';
import purgecss from 'vite-plugin-purgecss';

export default defineConfig({
  plugins: [
    purgecss({
      content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
      safelist: ['sr-only', 'not-sr-only']
    })
  ]
});

// webpack.config.js
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
      safelist: ['sr-only', 'not-sr-only']
    })
  ]
};

# Using PurgeCSS CLI
npx purgecss --css css/style.css --content src/index.html src/**/*.js --output css/

# With a config file
npx purgecss --config purgecss.config.js