# Tailwind v3 update for Craft CMS & Laravel Mix

When updating Tailwind to version 3, it caused some issues where just by saving the `.twig` file didn't show the results directly; with new ability where Tailwind v3 purged unused Tailwind classes, it added an additional step for a developer had to save either `.scss` file or `.js` file in order to recompile the assets, thus able to repurge the style sheet so that it displays and updates the newly saved class in `.twig` file.
After doing some research with numerous trial and errors, I realized Laravel Mix v6 allowed saving the .twig file to recompile the assets automatically, thus smoothing out the workflow even better.

## Update Guide

**Disclaimer** - Note that this update guide is specific for upgrading Craft CMS which uses Laravel Mix v5 and Tailwind v2 to Laravel Mix v6 and Tailwind v3.

### Updating Tailwind to v3
To update the Tailwind v3 run this command:
```Bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

**Note** - in the time where this gist was created, Tailwind v3 was the latest version.

For more info please check the [official documentation](https://tailwindcss.com/docs/upgrade-guide#upgrade-packages).

### Update deprecated code for Tailwind
Change any deprecated code from Tailwind v2 to be compatible with v3. Please take note with [official upgrade](https://tailwindcss.com/docs/upgrade-guide#upgrade-packages) guide from Tailwind site.

### Update Laravel Mix to v6
Run
```Bash
npm install laravel-mix@latest
```
**Note** - in the time where this gist was created, Laravel Mix v6 was the latest version.

We also need to update webpack to latest version:
```Bash
npm install -D webpack@latest webpack-cli@latest
```

### Update `package.json` script code
With Laravel 6, we need to update the script section:
```JSON
"scripts": {
  "dev": "mix",
  "watch": "mix watch",
  "hot": "mix watch --hot",
  "prod": "npm run production",
  "production": "mix --production"
},
```

Now simply to run local `npm run watch` to enjoy Tailwind v3 with Craft CMS and Laravel Mix

### Bonus: Add BrowserSync
With BrowserSync, it streamlines the workflow even smoother, as it automatically refreshes the page when edits are made.
First, we need to install BrowserSync:
```Bash
npm install -D browser-sync browser-sync-webpack-plugin
```
Then, update `webpack.mix.js`

```JavaScript
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
const baseUrl = process.env.DEFAULT_SITE_URL // Get value from .env to use as Browsersync proxy URL

mix.disableSuccessNotifications();
mix.setPublicPath('web/assets');

mix.js('src/js/app.js', 'js')
   .options({
       processCssUrls: false,
       postCss: [
           tailwindcss('./tailwind.config.js'),
       ]
   })
   .sass('src/sass/app.scss', 'css')
   .browserSync({
        files: ['public/assets/css/*', 'public/assets/js/*', 'templates/**/*'], // BrowserSync will refresh every time one of these files changes
        proxy: baseUrl, // This takes DEFAULT_SITE_URL from the .env file so devs can have different local URLs
        notify: false,
    })
   .version();
```

**Note** - After updating `webpack.mix.js` to use BrowserSync we can face a problem with [Google Chrome localhost error](https://stackoverflow.com/questions/47700269/google-chrome-localhost-neterr-cert-authority-invalid). If such error happens, we can set *Allow invalide certificates for resources loaded from localhost* to **Enable** in `chrome://flags/#allow-insecure-localhost`. For more detail please have a look at this [stackoverflow issue](https://stackoverflow.com/a/53985755/8762354).