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.
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.
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.
Change any deprecated code from Tailwind v2 to be compatible with v3. Please take note with official upgrade guide from Tailwind site.
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
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
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.