DEV Community

Catherine Chen
Catherine Chen

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

in your root folder.

webpack.mix.js

Inside webpack.mix.js, require tailwindcss:

const tailwindcss = require('tailwindcss');
Enter fullscreen mode Exit fullscreen mode

Update your code to read as such:

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

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') ],
    })
Enter fullscreen mode Exit fullscreen mode

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. πŸ˜„

Discussion (3)

Collapse
shanecarmody profile image
…

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') ],
})

Collapse
peterangelov profile image
Peter Angelov

Thank you πŸ’š

Collapse
cristiano profile image
cristiano

This guide was super helpful and easy to follow, thanks so much! πŸ™