webpack.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.{ts,js,html}',
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

    return broadMatches.concat(innerMatches)
  }
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: [
              require('postcss-import'),
              require('tailwindcss'),
              require('postcss-nested'),
              require('postcss-custom-properties'),
              require('autoprefixer'),
              ...(process.env.NODE_ENV.trim() === "prod" || process.env.NODE_ENV.trim() === "staging") ? [purgecss] : [],
            ],
          },
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['sass-loader'],
      },
    ],
  },
};