Multiple Tailwind config files for one app (TailwindCSS < 1.0)

In some projects we want to have multiple Tailwind config files for different parts of the app. The most common case is that we have one "admin" section (only for admins) and one "front" section (only for customers) and they need to have different designs.

In the past we just has one big Tailwind config file so we could support both of them, but it's actually not that hard to have separate Tailwind config files for each section.

This is our webpack.config.js file which makes this happen:

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

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

    // Admin
    .sass(
        'resources/sass/admin.scss',
        'public/css/',
        {}, // sass-loader plugin options
        [tailwindcss('./tailwind-admin.js')] // postcss plugins
    )

    // Front
    .sass(
        'resources/sass/front.scss',
        'public/css/',
        {}, // sass-loader plugin options
        [tailwindcss('./tailwind-front.js')] // postcss plugins
    )
    .options({
        processCssUrls: false,
    })
    .sourceMaps();

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

See this Gist for a complete reference.