Can I make Tailwind CLI execute other npm scripts after --watch?

Other Questions NPM
1

Hey everyone, I’m struggling with my npm scripts configuration. I want to run Tailwind CLI with the --watch flag and then start other tasks afterwards. In my package.json, I have the following setup:

"scripts": {
  "build:styles": "tailwindcss -i ./src/styles/main.css -o ./dist/styles/output.css",
  "compile:templates": "node ./template-compiler.js",
  "build": "npm-run-all compile:templates build:styles",
  "watch:styles": "npm run build:styles -- --watch",
  "start": "npm run build && npm-run-all --parallel watch:styles sync-browser",
  "sync-browser": "node ./browser-sync.js"
}

The problem is that the build:styles script gets executed twice in the start command. I need to run compile:templates first, then build:styles, and finally start the watcher and browser sync. However, the watcher doesn’t exit, so sync-browser never starts. Is there a way to launch watch:styles and immediately trigger sync-browser without running them in parallel using run-p? I even tried using chokidar as an alternative to Tailwind’s watch, but it was too slow and ineffective.

Any suggestions to improve this workflow would be appreciated. Thanks!

2

I’ve dealt with similar challenges in my projects. One approach that’s worked well for me is using the nodemon package in combination with a shell script. Here’s how you could set it up:

  1. Create a shell script (e.g., start.sh) that runs your commands in the desired order:
#!/bin/bash
npm run compile:templates
npm run build:styles
node ./browser-sync.js &
tailwindcss -i ./src/styles/main.css -o ./dist/styles/output.css --watch
  1. Modify your package.json:
{"scripts": {
  "build:styles": "tailwindcss -i ./src/styles/main.css -o ./dist/styles/output.css",
  "compile:templates": "node ./template-compiler.js",
  "start": "nodemon --watch src --ext js,css,html --exec 'sh ./start.sh'"
}}

This setup will run your commands in sequence, start the watcher, and restart the process if any files change. It’s been reliable in my experience and might solve your workflow issues.

3

I’ve encountered a similar issue in my projects. One solution that worked for me was using the concurrently package instead of npm-run-all. It allows you to run multiple commands simultaneously and has better control over process management.

Try modifying your package.json scripts like this:

"scripts": {
  "build:styles": "tailwindcss -i ./src/styles/main.css -o ./dist/styles/output.css",
  "compile:templates": "node ./template-compiler.js",
  "build": "npm run compile:templates && npm run build:styles",
  "start": "npm run build && concurrently \"npm run build:styles -- --watch\" \"node ./browser-sync.js\""
}

This approach ensures that compile:templates and the initial build:styles run sequentially. Once those are done, Tailwind’s watch and browser-sync start concurrently. It should resolve the problem of the watcher hanging the subsequent command from running.

4

hey, i reccomend trying wait-on. after the build cmd, wait for output.css then run watchers. might help u: e.g. set ‘start’: ‘npm run build && wait-on file:./dist/styles/output.css && npm-run-all --parallel watch:styles sync-browser’. hope that helps!