0

Here are my scrips in package.json. I created a project using create-react-app and want to introduce tailwind. 

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css",
"build": "npm run build:css && react-scripts build",
"start": "npm run watch:css && react-scripts start",

when I run yarn start, the app is not started. Seems it stopped on watch. how can I have tailwind watch and start app?

Negin Basiri
  • 1,305
  • 2
  • 26
  • 47

2 Answers2

6

So basically what's happening is that when you run two scripts it waits until the first will return something. If you just start the development server before and then run watch:css it will work, because the development server will be started and then script that builds tailwind will be watching for changes. If you arrange your scripts like this it should work:

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css", "watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css", "build": "react-scripts build && npm run build:css", "start": "react-scripts start && npm run watch:css",

If this won't help you may use concurrently package:

https://www.npmjs.com/package/concurrently

or you could run them separately. react-script start in one console and watch:css in the second one, then the first will reload after any changes are made in styles.css and the second will rebuild styles.css when any change will be made in tailwind.css

zolwiastyl
  • 61
  • 2
3

You can run commands concurrently with &.

See https://stackoverflow.com/a/5553774/13214938 for more info.

"start": "react-scripts start & npm run tailwind:watch && kill $!",
"tailwind:watch": "tailwindcss -i src/index.css -o src/build.css --watch"
Hayden Linder
  • 393
  • 4
  • 10