Setting up TailwindCSS with SASS in Laravel

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. :D