Multiple Tailwind configs in Laravel

Stratulat Alexandru • January 6, 2019

tutorial tailwind laravel

A common use case for having multiple Tailwind configs in one project, is separating the styles of the client part from the dashboard part.

Note: In my previous post, we've covered the installation of Tailwind into a Laravel project. If you've missed it, read it here.

This is how a basic Tailwind config in Laravel Mix would look like:

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

const tailwindcss = require('tailwindcss');

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

However in this case, all of our styles will use the same Tailwind config. Let's separate things:

  1. Remove the postCss config from the options object.

  2. Chain the sass() method as many times as you want and specify explicit Tailwind configs for each chain. Example:

.sass('resources/sass/app/main.scss', 'public/css/app.css', {}, [
    tailwind('./tailwind-app.js'),
])

Tip: Optionally you can specify explicit output file names, as seen in the example above.

And here is how a full example would look like:

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

const tailwindcss = require('tailwindcss');

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

Tip: You can also chain the js() method to compile multiple javascript files. I encourage you to separate the JS logic for the client and dashboard part.


Final Notes

Using multiple Tailwind configs with Laravel Mix is very easy, but it didn't look so obvious for me when I've encountered this need for the first time. So here I am, sharing this personal note with you.

Next we will be building cool UI components from scratch, with VueJS and TailwindCSS. So stay tuned and maybe even subscribe below. Thanks!

Sign up for new posts

No spam. Unsubscribe at any time.