Craft CMS Laravel Mix setup using Tailwind CSS.

webpack.mix.js

let mix = require('laravel-mix');
let autoprefixer = require('autoprefixer');
let tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');
require('laravel-mix-favicon');
require('laravel-mix-postcss-config');


/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Craft application. By default, we are compiling the CSS
 | file for your application, as well as bundling up your JS files.
 |
 */

mix
    .setPublicPath('public/')
    .postCss('src/css/app.pcss', 'public/css/app.css', [
            require('postcss-nested'),
            tailwindcss('tailwind.config.js'),
            autoprefixer
        ]
    )
    .postCssConfig()
    .js('src/js/app.js', 'public/js/app.js')
    .favicon({
        inputPath: 'src/img/favicon',
        inputFile: '*.{jpg,png,svg}',
        publicPath: 'public',
        output: 'img/favicon',
        dataFile: 'data/faviconData.json',
        blade: 'public/img/favicon/favicon.html',
        reload: false,
        debug: false,
        configPath: './realfavicongenerator-config.json'
    })
    .purgeCss({
        enabled: mix.inProduction(),
        folders: ['src', 'templates'],
        extensions: ['html', 'js', 'twig', 'vue'],
    })
    .browserSync({
        proxy: 'kelly-halloran.test',
        files: [
            'public/css/**/*.css',
            'public/js/**/*.js',
            'templates/**/*.twig'
        ]
    })