Laravel Mix with multiple Tailwind config and PurgeCSS (separate Admin dashboard and Front app)

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

const rootPath = Mix.paths.root.bind(Mix.paths);

const tailwindPlugins = function(configFile, paths) {
  const pluginList = [tailwindcss(configFile)];

  if (mix.inProduction()) {
    pluginList.push(require('@fullhuman/postcss-purgecss')({
      content: paths.map((path) => rootPath(path)),
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
      whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/]
    }))
  }

  return pluginList;
}

mix
  .js('resources/js/front/front.js', 'public/js/')

  .sass(
    'resources/css/front.scss',
    'public/css/',
    {},
    tailwindPlugins(
      'resources/css/tailwind.front.config.js',
      [
        'resources/views/front/**/*.html',
        'resources/views/front/**/*.php',
        'resources/js/front/**/*.vue',
      ]
    )
  )

  .sass(
    'resources/css/admin.scss',
    'public/css/admin/',
    {},
    tailwindPlugins(
      'resources/css/tailwind.admin.config.js',
      [
        'resources/views/components/admin/**/*.php',
        'resources/views/admin/**/*.html',
        'resources/views/admin/**/*.php',
        'resources/views/auth/**/*.html',
        'resources/views/auth/**/*.php',
        'resources/js/admin/**/*.vue',
      ]
    )
  )

  .options({
    processCssUrls: false,
  })

  .browserSync('boucherie.test');


if (mix.inProduction()) {
  mix.version();
}

This is based on Jeffrey's comment here: laravel-mix/laravel-mix#1688 (comment)
The PurgeCSS config is based on https://github.com/spatie/laravel-mix-purgecss

Looking at the solution, it seems easy but getting PurgeCSS to work properly took me some time.

Before that I tried something where I passed a mode ENV_MODE=front yarn prod and configuration was changing depending on the env var. I ran it once for front, once for admin but it was overriding the mix-manifest.json.
It wasn't so bad, until I enabled mix.version() 💥 😓

So I finally took the time to make it work properly.

(yes, I use a light background for my terminal)

(sorry to off, what color scheme is this?)

I forgot what was the the orignal theme but here is an export of my config: https://www.dropbox.com/s/7ll6punehfi2qq4/SigTerm.itermcolors?dl=0

Good light theme are increasingly hard to find, especially for consoles 😞

If you're looking for a simple way

mix.sass('resources/sass/app.scss', 'public/css', {}, [
    tailwindcss('./tailwind.config.js')
]).options({
    processCssUrls: false,
});

mix.sass('resources/sass/admin.scss', 'public/css', {}, [
    tailwindcss('./tailwind-admin.config.js')
]).options({
    processCssUrls: false,
});