Combining Tailwind and Vue js build scripts into a single call.

I have 2 vite.config.js files and a single tailwind.config.js

The commands to run these individually are straight forward.  But adding a –watch to each would mean having 3 terminals open in the most basic method.

I could have created a single bash (.sh) script to call them with ; separating them to run them all.  But it seemed a poor way to do it.  I am not an expert in npx and don’t want to be as I want a standardised configuration across all future projects.

A bit of research and I found this solution.

Install the concurrent package

npm install concurrently --save-dev

In your package.json add these lines.

"scripts": {
"watch:all": "concurrently --prefix-colors \"blue,green,magenta\" \"npx vite build --watch\" \"npx vite build --config modules/vite.config.js --watch\" \"npx tailwindcss -i ./app/Views/css/input.css -o ./public/css/styles.css --watch\""
}

Obviously alter it to fit your scripts.  I have a vite.config.js in the root of my project and one in the ./modules directory.  The tailwind.config.js is in the root.  The prefix-colors option allows you to set the colour that will be displayed for each of the running watches.

Then to run the command you execute;

npm run watch:all

Now as soon as I login, I cd to the root of the project and run the single command and don’t have to worry about tailwind or vue js updates to my project.