Split assets using Laravel Mix

There are cases where you’d like to build different JS/CSS assets for your site, like when you are building a landing page and a user-authenticated dashboard. You wouldn’t want to load all the CSS and JS assets on your landing page would you?

In this tutorial we will see how to split the generated builds into two workflows so that you don’t load your dashboard’s dependencies in your landing page.

In a default skeleton Laravel Project with TailwindCSS you have a project with:

• package.json
• tailwind.config.js
• webpack.mix.js
• resources/css/app.css

Step 1: Create a new css file

We will be using the default /resources/css/app.css for our dashboard page and create a new one for our landing page. First thing to do is create a new css base file like so:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

This file will include our landing page CSS therefore any custom CSS you’d like to add it should be included under tailwind’s import statements.

Step 2: Create a new tailwind config

Your landing page will have different tailwind config like different colours or plugins. Most importantly it will need to purge classes from a different location than your dashboard.

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')

module.exports = {
    content: [
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            colors: {
                rose: colors.rose,
            },
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio')],
};

In my case, I am building the dashboard using InertiaJS and my landing page is pure Blade, therefore my content only includes files under resources/views and their cached versions. This means any class that is not included in those directories will be purged.

Step 3: Update Laravel Mix to use our new configs

Last thing that is needed is to tell Laravel Mix to use those config files as well as build two different assets when running npm run prod.

To do that we need to update our webpack.mix.js file like so:

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

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        tailwind({config: 'tailwind.config.js'}),
    ])
    .webpackConfig(require('./webpack.config'));

mix.postCss('resources/css/public.css', 'public/css', [
    require('postcss-import'),
    tailwind({config: 'tailwind-public.config.js'}),
]);

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

mix.disableSuccessNotifications();

Done!

When running npm run dev/prod/hot you should be seeing two different builds in your public/css folder.

Don’t forget to include the generated css file public/css/public.css in your blade layout!

<link rel="stylesheet" href="{{ mix('css/public.css') }}">