TailwindCSS in browser not updated after modifying class

Question

I'm using React to run Tailwind, but in order to see the changes I made to classNames, I have to restart the server and run npm run start again to see the updates. Is there anything I need to change in my script so that the browser updates without needing to restart the server.

package.json

"scripts": {
  "start": "npm run build:css && react-scripts start",
  "build": "npm run build:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "build:css": "postcss src/CSS/tailwind.scss -o src/CSS/index.scss "
}

tailwind.config.js

/**@type {import('tailwindcss').Config}*/
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './src/**/*'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

I tried using npm-run-all without success. Any other suggestions?

Answer 1

You used Create React App to generate the React project, right? Why not follow this process? postcss will update the latest implementation for you.