Install Tailwind CSS & SASS with Laravel Mix (2022)

Laravel Mix is a great tool for defining Webpack build steps for several common CSS and JavaScript pre-processors. Personally I’m a huge fan of TailwindCSS and I use it in a lot of projects. For writing plain CSS I prefer to use SASS (SCSS). Here I’ll show you how to set up your Laravel application with SASS and Tailwind CSS.

For this tutorial I already have a local Laravel application installed with Laravel Valet. To use Laravel Mix, you need to have Node.js and npm installed. To check whether they are installed, run the following two prompts from your command line:

node -v
npm -v

This will return the version numbers of Node.js and npm. npm is distributed with Node.js – which means that when you download Node.js, you automatically get npm installed on your computer. Download and install Node.js from the official Node.js website.

This tutorial works for both Tailwind CSS v3 (released in December 2021) and Tailwind CSS v2. There may be slight changes if you want to use v2, but nothing big has changed.

Install Laravel Mix

The next step is to install Laravel Mix. To do so, open up your command line and go to the folder where your Laravel application is installed (use cd foldername to move into a folder from the command line). When you have the folder with the Laravel application open in terminal, run the following two commands to install Mix and install Tailwind CSS.

npm install
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Congrats! Now you’ve Laravel Mix installed and you can start using it.

Create a Tailwind CSS configuration file

The next step is to init Tailwind CSS and create a configuration file for Tailwind. Run:

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your application:

// tailwind.config.js
module.exports = {
  content: [],     // This key was called 'purge' in Tailwind CSS v2
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Purge unused classes from the file ‘tree-shaking’

We’ll do a little configuration for the Tailwind framework. In the content key, we’ll add the locations where our files live. This can be .php, .blade.php, .js and .vue files – just every file where Tailwind classes can be set.

Every time you run Laravel Mix and create a new CSS file for production, Tailwind will only include the classes that are used in your application. This drastically reduces the final file size.

content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
],

Configure Laravel Mix

The last step is to configure Laravel Mix itself. Open the webpack.mix.js file. It should look like this:

const mix = require('laravel-mix');
 
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
 
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

What you're seeing here is that Laravel mix does two things:

1. It takes the resources/js/app.js file, minifies that and places it inside the public/js directory, becoming public/js/app.js.
2. It takes the resources/css/app.css file, minifies that and places it inside the public/css directory, becoming public/css/app.css.

Now, we keep the first part about the JavaScript intact and we'll modify the second part. Remove everything starting at .postCss(...

Next, rename the resources/css to resources/sass. Rename the app.css file to app.scss. At the top of the .scss file, add:

/* ./resources/sass/app.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;

Add the following to the bottom of the webpack.mix.js file. What we're doing here, is in fact almost the same, with the only difference that we're using SASS rather than normal CSS.

.sass('resources/sass/app.scss', 'public/css')

Configure Laravel Mix & Tailwind CSS

We're almost ready now. The last thing we need is to add support for Tailwind CSS (that's what this was all about, isn't it?😅). We do that by adding an .option() to the .sass() call.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss'); /* Add this line at the top */
 
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .version();

Also make sure to define the tailwindcss constant at the top of the page. To polish it off a bit, we also add the .version() call at the end of the file.

How do we use this?

Laravel Mix is Webpack based. That means that if you have made changes to your CSS/JS files, you'll need to compile those files again. That is done with the below two commands:

npm run dev
npm run prod

The first one is for development and the second one is for production. The first command has all the Tailwind classes included, where the second command purges the unused Tailwind classes. Also run one of these commands when you've made changes to one of your configuration files.

Happy coding!

In this tutorial I've showed you how to set up a Laravel application with Tailwind CSS and SASS. Using both Tailwind CSS and SASS is quite a common situation, but there wasn't really an updated guide for this. If you still have any questions or if this worked for you, please let me know in the comments!