# Setting up TailwindCSS with SASS in Laravel

## Start

*Before beginning, make sure you have* [*Composer*](https://getcomposer.org/) *and* [*npm*](https://www.npmjs.com/get-npm) *installed.*

First, [create a Laravel project](https://laravel.com/docs/8.x/installation#installing-laravel).

## Install dependencies

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

```diff
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:

```diff
npx tailwindcss init
```

in your root folder.

## webpack.mix.js

Inside `webpack.mix.js`, require `tailwindcss`:

```diff
const tailwindcss = require('tailwindcss');
```

Update your code to read as such:

```diff
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:

```diff
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