To automatically regenerate CSS (e.g. through a PostCSS pipeline) when files change, use a file watcher. The approach below works for any script you want to run on file changes.

Example: a script that builds CSS:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
}

To re-run it whenever files in the layouts folder change (e.g. to regenerate CSS and run purge/minification from your PostCSS setup), use the watch package.

Install it:

npm install watch

Add a watch script to package.json that runs build:css whenever the layouts folder changes:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Now run npm run watch or yarn watch.

Lessons in this unit:

0:	Introduction
1:	How to use or execute a package installed using npm
2:	npm dependencies and devDependencies
3:	How to fix the "Missing write access" error when using npm
4:	npm can install packages in the parent folder
5:	Install an older version of an npm package
6:	Find the installed version of an npm package
7:	How to test an npm package locally
8:	npm global or local packages
9:	What are peer dependencies in a Node module?
10:	`npm run dev` is a long-running program
11:	Semantic Versioning using npm
12:	Uninstalling npm packages with `npm uninstall`
13:	An introduction to the npm package manager
14:	The npx Node Package Runner
15:	The package.json guide
16:	The package-lock.json file
17:	What is pnpm?
18:	Should you commit the node_modules folder to Git?
19:	Update all the Node dependencies to their latest version
20:	Where does npm install the packages?
21:	Bumping Node.js dependencies
22:	▶︎ Run package.json scripts upon any file changes in a folder