React项目中如何实现Tailwind CSS自动编译，替代手动执行npm run build-css

1. 确认Tailwind配置的内容检测范围 #

确保你的tailwind.config.js中content字段覆盖了所有React组件文件，这样Tailwind才能捕捉到类名变化：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 匹配src目录下所有JS/TSX组件文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 检查CSS入口文件的Tailwind指令 #

确认src/styles/index.css（即watch-css脚本指定的入口文件）包含Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 并行启动CSS监听与开发服务 #

你的package.json已包含watch-css脚本，但当前开发流程未自动运行它。需要借助并行工具让它和开发服务器同步启动：

首先安装并行执行工具concurrently：

npm install --save-dev concurrently

然后修改package.json中的start脚本，实现CSS监听与开发命令并行执行：

"scripts": {
    "prod": "cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js && electron --noDevServer . ",
    "start": "concurrently \"npm run watch-css\" \"cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development && craco start\"",
    "build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production && craco build",
    "watch-css": "npx tailwindcss build -i src/styles/index.css -o src/styles/main.css --watch",
    "build-css": "npx tailwindcss build -o src/styles/main.css",
    "package-m1": "electron-forge package --arch=arm64 --platform=darwin",
    "package-intel": "electron-forge package --arch=x64 --platform=darwin",
    "package": "npm run package-m1 && npm run package-intel",
    "postpackage": "electron-packager ./ --out=./builds"
  },

4. 验证效果 #

运行npm run start启动开发环境后，修改React组件的className时，Tailwind会自动重新编译CSS，页面热更新后新样式会立即生效，无需手动执行build-css命令。

内容的提问来源于stack exchange，提问作者Alex Styl