React中修改TailwindCSS类后浏览器不更新，求解决方案

当前问题核心：修改TailwindCSS类名后必须重启npm run start才能看到更新，本质是现有build:css命令仅在启动开发服务器前执行一次，未监听文件变化自动重新编译CSS。以下是无需重启服务器的解决办法：

步骤1：安装依赖 #

安装用于多命令并行执行的concurrently，以及文件变化监听的nodemon：

npm install --save-dev concurrently nodemon

步骤2：修改package.json的scripts #

更新scripts配置，让开发服务器启动时同时监听文件变化并自动重新编译CSS：

"scripts": {
  "start": "concurrently \"npm run watch: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",
  "watch:css": "nodemon --watch src --ext js,jsx,ts,tsx,scss --exec \"npm run build:css\""
}

• concurrently：同时启动CSS监听命令和React开发服务器
• watch:css：通过nodemon监听src目录下所有js/jsx/ts/tsx/scss文件变化，一旦有修改就自动执行build:css重新生成CSS

步骤3：确认Tailwind配置覆盖范围 #

确保tailwind.config.js的content数组包含所有用到Tailwind类的文件路径，当前配置已覆盖src/**/*，可根据项目结构微调：

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

步骤4：验证热更新 #

运行npm start启动项目，修改任意组件中的Tailwind类名，浏览器会自动重新加载并显示最新样式，无需重启服务器。

补充说明 #

• 此前npm-run-all无效大概率是未配置正确的文件监听逻辑，concurrently+nodemon的组合更直观易排查
• 需确保src/CSS/index.scss已正确导入到项目入口文件（如src/index.js或src/App.js），保证编译后的CSS生效

内容的提问来源于stack exchange，提问作者janki gohil