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 syncscript. 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 🤷‍♂️