DEV Community

Cover image for Setting up TailwindCSS with SASS in Laravel
Catherine Chen
Catherine Chen

Posted on • Edited on

Setting up TailwindCSS with SASS in Laravel

#laravel #saas #tailwindcss

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. 😄

Top comments (6)

Collapse
 
petsto profile image
Petar Stoyanov •

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

Collapse
 
ahmedhelalahmed profile image
Ahmed Helal •

This part is missing in tailwind.config.js

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
galagargh profile image
Galagargh •

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

Collapse
 
cristiano profile image
cristiano •

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

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 💚

Read next

tanay profile image

Building a Card with Gradient Hover Effect Inspired by Nuxt UI

Tanay Karnik -

rafaelogic profile image

Essential Layout Considerations for Web Pages Using Tailwind CSS

Rafa Rafael -

jamescarter profile image

Unlocking the Power of Admin Templates

James Carter -

andrewkangg profile image

With your .env, project, and a single Dockerfile, simply run 'bash run.sh'.

Andrew Kang-G -