React项目TailwindCSS新增className不生效 仅npm start时才加载样式

• 检查 tailwind.config.js 的 content 配置项

  这是最常见的失效原因，content 路径必须覆盖所有包含Tailwind类名的文件，默认配置参考：

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

  如果你的业务代码存放在src以外的目录，需要把对应路径补充到content数组中。

• 检查入口CSS引入规则
  确认你在项目全局入口CSS（通常为src/index.css）中正确添加了三条Tailwind指令：

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

  同时确认该CSS文件在入口文件src/index.js/src/index.tsx中是直接引入的，写法为import './index.css'，不要使用CSS Modules的引入方式。

• 检查类名拼写与版本兼容性
  Tailwind类名采用短横线分隔命名，比如正确写法为text-blue-600、justify-center，避免拼写错误（比如把center写成centre、大小写错误）；同时确认你使用的类名和安装的Tailwind大版本匹配，避免使用已废弃的旧版本类名。

• 检查PostCSS配置
  项目根目录下的postcss.config.js必须正确注册Tailwind和Autoprefixer插件，默认配置参考：

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

  如果你使用了craco、react-app-rewired等工具自定义CRA配置，需要确认PostCSS插件链没有被其他配置覆盖。

• 清除缓存重启服务
  依次执行以下操作：

  1. 停止当前运行的开发服务
  2. 删除node_modules/.cache目录
  3. 重新执行npm start或yarn start启动开发服务

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