Hot reload tailwindcss changes with browser-sync
source link: https://alexanderzeitler.com/articles/watch-tailwind-changes-update-browser-sync/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Alexander Zeitler
Hot reload tailwindcss changes with browser-sync
The other day I wanted browser-sync
to include my changes made to tailwind.config.js
or tailwind.css
without manually restarting browser-sync
after my output.css
has been generated.
Initial setup
My initial setup has been tailwindcss
and browser-sync
installed and configured like this:
- tailwind.css
- tailwind.config.js
The contents of the tailwind.css
are based on the default setup:
@tailwind base;
@tailwind components;
@tailwind utilities;
This is the default tailwind.config.js
file:
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
};
The sync
script in package.json
did look like this:
browser-sync start --server --files \"**/*\
Having this setup, changes to files have been monitored by browser-sync
and updated in the browser.
However, changes made to tailwind.css
or tailwind.config.js
have not been monitored and I had to restart sync
after running npx tailwindcss build tailwind.css -o output.css
.
Automate all the things
To get rid of this manual step, I installed these devDevependencies
:
yarn add -D nodemon npm-run-all postcss-cli
Next, I add the dev
, watch-dev
and watch
scripts, so my scripts
section in package.json
ends up like this:
{
"scripts": {
"sync": "browser-sync start --server --files \"**/*\"",
"dev": "postcss tailwind.css --output output.css",
"watch:dev": "nodemon -x npm run dev -w tailwind.config.js -w tailwind.css",
"watch": "run-p watch:dev sync"
}
}
Now I can just run yarn watch
and browser-sync
includes the changes made to tailwind.css
and tailwind.config.js
instantly.
run-p
is the CLI tool installed by npm-run-all
and first starts the watch:dev
followed by the sync
script. watch-dev
runs nodemon
which watches the changes made to tailwind.config.js
and tailwind.css
. If changes are made, postcss
is run by the dev
script to compile tailwindcss output again.
To make this work, I've added a postcss.config.js
:
module.exports = {
plugins: [require("tailwindcss")("tailwind.config.js")],
};
This step does the work done by tailwindcss build tailwind.css -o output.css
before.
That's it 🤷♂️
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK