How to use SASS with TailwindCSS in Laravel?

SASS (Syntactically Awesome Style Sheet) is the world’s most mature, stable, and powerful professional-grade CSS extension language.

If you want to know more about sass visit sass-lang.com

Let’s see step-by-step how to use SASS in Laravel with TailwindCSS.

1. Folder structure

Create a folder and file like this structure resources/sass/app.scss

2. Use Laravel Mix

Open webpack.mix.js from your project root folder.

It’s looks like…

Add the following lines to it for plain CSS styles.

mix.sass('resources/sass/app.scss', 'public/css');

To use TailwindCSS, Add these lines.

mix.sass('resources/sass/app.scss', 'public/css', {}, [
          require('tailwindcss'),
]);

Then save the file and run this command.

The webpack.mix.js file has been updated so that packages for the SASS compiler are automatically installed on the node packages folder when the following command is executed.

npm run watch // for development

Now you are ready to write SASS code.

Open the app.scss file and write down some styles in it and save. npm (npm run watch) will automatically compile your SASS code into CSS. Now open the app.css file in the public folder in which you can see the compiled CSS code.