Mix + Tailwind + Purge (without sass) // Stand-Alone Projects

webpack.mix.js

let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

//If we don't use sass we will not need the purgecss wrapper of Laravel-mix
//Instead we use the original postCSS plugin.
const purgecss = require('@fullhuman/postcss-purgecss')({
    // Specify the paths to all of the template files in your project 
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
      // etc.
    ],
    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    
    // --------------------
    // Remember insert in your CSS the comments for fragments that you do not want to process with PurgeCSS:
    //  /* purgecss start ignore */
    //  /* purgecss end ignore */
    //
    // Another solution is insert whitelistPatterns in the PurgeCss options. For instance, the following whitelistPatterns is for the CSS transitions of Vue:
    // whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!cursor-move).+-move$/, /^router-link(|-exact)-active$/ ]
    // ---------------------
  });

// This opcion avoids to generate the file "app.js.LICENSE.txt" when is executed "npm run prod"
mix.options({
    terser: {
      extractComments: false,
    }
});


mix.postCss('src/input.css', 'build/output.css', [
    tailwindcss,
    //Execute PurgeCss only in production
    ...process.env.NODE_ENV === 'production' ? [purgecss] : []
]);