Guide for updating Tailwind to version 3 for Craft CMS & Laravel Mix

craft-cms-laravel-mix-tailwind-3-update.markdown

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:

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.

Update deprecated code for Tailwind

Change any deprecated code from Tailwind v2 to be compatible with v3. Please take note with official upgrade guide from Tailwind site.

Update Laravel Mix to v6

Run

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:

npm install -D webpack@latest webpack-cli@latest

Update package.json script code

With Laravel 6, we need to update the script section:

"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:

npm install -D browser-sync browser-sync-webpack-plugin

Then, update webpack.mix.js

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