postcss, tailwind

postcss.config.js

const isProd = process.env.NODE_ENV === 'production';

const options = {
  purgecss: {
    // Docs for PurgeCSS:
    // - https://purgecss.com/configuration.html#options
    // Consider:
    // - https://github.com/americanexpress/purgecss-loader
    // - https://frontstuff.io/how-i-dropped-250-kb-of-dead-css-weight-with-purgecss
    // - https://gorails.com/episodes/purgecss

    // Paths to all of the template files in the project.
    content: ['./pages/*.js', './pages/**/*.js', './components/*.js', './components/**/*.js',     "./src/**/*.html",'],
    css: ['./styles/*.scss', './styles/**/*.scss', './component/*.scss', './component/**/*.scss'],

    // Specific selectors for PurgeCSS to avoid removing.
    whitelistPatterns: [/__next/, /body/, /html/, /a/, /p/, /ul/, /ol/, /li/, /\*/, /:before/, /:after/, /pwa-/],

    // In this regular expression, include any special characters
    // (also accounts for Tailwind’s CSS selector syntax — e.g., `.md\:bg-blue`).
    defaultExtractor: content => content.match(/[\w-/:%]+(?<!:)/g) || [],

    rejected: true
  }
};

const plugins = ['postcss-import', 'tailwindcss', 'autoprefixer', 'postcss-preset-env'];

if (isProd) {
  // We use PurgeCSS to programatically identify and remove unused
  // CSS selectors to reduce the file-sizes of the stylesheets.
  plugins.push(['@fullhuman/postcss-purgecss', options.purgecss]);

  // We use `cssnano` for minifying the final CSS. Why? See this benchmark of
  // the popular CSS minifiers:
  // - https://github.com/GoalSmashers/css-minification-benchmark#readme
  // In comparing `clean-css` to `cssnano`, `clean-css` is 4% faster,
  // but its output is 12% larger.
  // Source:
  // - https://github.com/mui-org/material-ui/blob/a88a405eaf4e57fb2ff8cb88599ecaf31e786b77/pages/_document.js#L9-L13
  plugins.push('cssnano');
}

module.exports = {
  plugins
};

/*

Also see:

- https://www.theenadayalan.me/blog/setup-tailwindcss-in-react-application

  npm i -D postcss postcss-loader css-loader mini-css-extract-plugin

- https://gorails.com/episodes/purgecss

*/