I'm running Tailwind with React but in order for me to see changes that I make to classNames I have to restart the server and run npm run start again to see the updates.

Is there something I need to change in my scripts so that the browser updates without having to restart the server.

package.json '''

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  }

'''

All feedback is appreciated! Thanks

CodePudding user response：

It sounds like you're using npm run watch:css to build your CSS styles, but this command is only run once when you start the server. To make your changes appear without having to restart the server, you will need to run npm run watch:css in "watch" mode, which will automatically rebuild your CSS whenever you make changes to your Tailwind configuration or your source CSS files.

To run npm run watch:css in watch mode, you can use the -w or --watch flag. So, your watch:css script in package.json would look like this:

"scripts": {

... "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css -w" }

CodePudding user response：

It looks like you are using npm run watch:css to compile your Tailwind CSS file, but this script is only run when you start the development server using npm run start. To automatically recompile your CSS file whenever you make changes to it, you will need to use a tool like npm-watch or onchange to watch the CSS file for changes and run the watch:css script whenever it is updated.

Here is an example of how you could use npm-watch to accomplish this:

1. Install npm-watch using npm install npm-watch --save-dev

2. Add the following script to your package.json file:

   "scripts": { // ... other scripts "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css" "watch": "npm-watch" }, "watch": { "src/assets/tailwind.css": "npm run watch:css" }

3. Run npm run watch to start watching the CSS file for changes. This will run the watch:css script whenever the CSS file is updated, and the changes will be reflected in the browser without needing to restart the development server.

Alternatively, you could use onchange instead of npm-watch to accomplish the same thing. The steps would be similar, but you would use the onchange command instead of npm-watch in the watch script.

"scripts": {
  // ... other scripts
  "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  "watch": "onchange 'src/assets/tailwind.css' -- npm run watch:css"
}

This approach should allow you to make changes to your Tailwind CSS file and see the updates in the browser without needing to restart the development server.