Setting up TailwindCSS with SASS in Laravel

Start

Before beginning, make sure you have Composer and npm installed.

First, create a Laravel project.

Install dependencies

Next, install Laravel's npm dependencies by running the following commands:

npm install
npm install tailwindcss

Sass comes with Laravel, so you don't need to install it manually.

tailwind.config.js

You may want to create a tailwind.config.js file by running:

npx tailwindcss init

in your root folder.

webpack.mix.js

Inside webpack.mix.js, require tailwindcss:

const tailwindcss = require('tailwindcss');

Update your code to read as such:

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

where app.scss is the name of your main SCSS file.

For each extra SCSS file you have, add another snippet of code. Example:

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

Previewing Changes

To preview changes to your SCSS files as soon as you make them, run npm run watch as you edit. Every time a SCSS file listed in webpack.config.js is updated, your files will be built again. Make sure to disable caching in your browser first, or the newly built files will not be loaded, and the browser will continue to use your old files.

---

That's it! Now you're all set. 😄

Comments

[Petar Stoyanov]

This is awesome! Thanks for adding this guide. Helped tremendously with a setup I wanted. Legend 🚀🚀🚀

[Ahmed Helal]

This part is missing in tailwind.config.js

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

[Galagargh]

Was tearing my hair out wondering why my cols were not working, thanks

[cristiano]

This guide was super helpful and easy to follow, thanks so much! 🙏

[…]

Thanks for the article.

Why do you add an options block for each .sass declaration? Doing like below does the same thing. There doesn’t seem to be any performance impact.

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

[Peter Angelov]

Thank you 💚