Install Tailwind CSS & SASS with Laravel Mix (2022)

Published March 12, 2021; last updated on January 19, 2022
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: [],
  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 purge 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.

purge: [

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')
        postCss: [ tailwindcss('./tailwind.config.js') ],

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!

Stay up to date with all things Laravel, Tailwind, WordPress & PHP

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.

Image Ralph J. Smit
Ralph is a designer gone developer. He happily lives in the Netherlands. His passion for good design drove him towards development, because he felt that no-code tools were too limiting. On this blog, Ralph writes the articles he would've wanted to have during his continual developer journey. → Follow on Twitter


  • Stefan

    January 22, 2022

    ty, very helpful <3

  • d street

    January 18, 2022

    is this the same process for using tailwind v3

    • Ralph Smit

      January 19, 2022

      Hey there, this works perfectly for Tailwind CSS v3. Thanks for asking, I updated the article as well👍

  • MAXX

    October 6, 2021

    please help me install vue js + tailwindcss into laravel 8 while using sass file

    • Ralph Smit

      October 11, 2021

      Hey Maxx, thanks for reaching out! I don't have much experience with Vue, but could you try following the above tutorial and replacing the .sass(/** ... */) part with .vue(/* .. */)? I believe that the Tailwind CSS team also has good documentation on Tailwind CSS with Laravel Mix, and Laravel Mix has good docs on Vue. Perhaps you could checkout those?

  • Danny Pendle

    October 5, 2021

    Hey Ralph, this was super helpful. I just started up a new Laravel breeze project which comes with tailwind and mix etc. I wanted to use sass with my project but using .sass without the .options function wasn't compiling anything and I couldn't figure out how to use sass with tailwind! Thanks for that, couldn't find any useful docs anywhere else. Only docs for using sass or using postcss, nothing for using the mix sass function with postcss options!

    • Ralph Smit

      October 6, 2021

      Hey Danny, thank you for leaving a comment! Yes, I had exactly the same problems as you, so I'm happy that it was helpful😀

Leave a reply

Leave a Reply to Ralph Smit Cancel reply

Your email address will not be published. Required fields are marked *

Do you want more articles like this delivered straight to your inbox?

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.