React中修改类名后TailwindCSS浏览器不更新，需重启服务器问题

你的问题出在**watch:css命令只执行一次CSS编译，没有监听文件变化**，同时start命令的执行逻辑导致无法同时运行CSS监听和开发服务器。以下是具体修复步骤：

1. 安装并行运行工具 #

首先安装concurrently，用来同时启动CSS监听和React开发服务器：

npm install concurrently --save-dev

2. 修改package.json的scripts配置 #

更新你的scripts，让watch:css持续监听文件变化，并用concurrently并行运行两个命令：

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

关键改动说明： #

• 给watch:css添加--watch参数：让PostCSS持续监听tailwind.css、Tailwind配置文件以及所有使用Tailwind类的组件文件变化，自动重新编译CSS。
• 用concurrently替换&&：原来的&&会等待前一个命令执行完毕才启动下一个，但watch:css加--watch后是持续运行的，concurrently可以同时启动两个长期运行的进程。
• 拆分build命令：新增build:css用于生产环境的一次性编译，避免build时陷入监听循环。

3. 确保Tailwind配置正确 #

检查你的tailwind.config.js，确保content数组包含所有使用Tailwind类的文件路径，比如：

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

这个配置让Tailwind能够检测到组件中className的变化，从而触发CSS重新生成。

完成以上修改后，重启一次开发服务器，之后修改组件的className时，浏览器会自动刷新并显示最新样式，无需再手动重启服务器。

内容的提问来源于stack exchange，提问作者Lamar Mccloud