Laravel, Tailwindcss, and purgeCss

To start a Laravel project which will work correctly with purgeCss you can set up like in the following example.

Install new Laravel app with

laravel new app

Then install Tailwindcss

npm install tailwindcss

Add the Tailwind helpers to your app.scss file:

/* purgecss start ignore */

@tailwind  base;

@tailwind  components;

/* purgecss end ignore */

@tailwind  utilities;

Create your Tailwind CSS config file by running:

npx tailwind init

Install purgeCss for laravel

npm install laravel-mix-purgecss --save-dev

Then you’ll need to edit your webpack.mix.js file.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

//Javascript
mix.js('resources/js/app.js', 'public/js');
//CSS
mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ]
    })
    .purgeCss({
        enabled: mix.inProduction(),
        folders: ['src', 'templates'],
        extensions: ['html', 'js', 'php', 'vue'],
    })
    .browserSync({
        proxy: 'app.test',
        notify: false,
        watch: true
    });

Now run

npm run development

and

npm run production

and check out the difference in the css file size.