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();
}

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,
});