React项目修改Tailwind类名需保存tailwind.config.js才生效问题求助

问题原因 #

这个问题本质是Tailwind CSS的类名扫描逻辑没有正常监听项目内代码文件的变更，只有修改tailwind.config.js时才会触发全量扫描重新生成样式，所以才会出现修改组件类名不生效，保存配置文件才生效的情况，和你配置里的字段版本不匹配有直接关系。

修复步骤 #

1. 适配Tailwind版本调整配置字段
   你当前配置里用的purge是Tailwind v2及更早版本的字段，如果你升级到了v3及以上版本，需要把purge替换为content，否则扫描规则不会正常生效，修改后的tailwind.config.js如下：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false,
  theme: {
    extend: {
      fontFamily: {
        poppins: "'Poppins', sans-serif",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

如果你仍然使用Tailwind v2版本，需要手动开启JIT模式实现类名实时扫描，配置如下：

module.exports = {
  mode: 'jit',
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false,
  theme: {
    extend: {
      fontFamily: {
        poppins: "'Poppins', sans-serif",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

2. 检查PostCSS配置
   确保项目根目录下的postcss.config.js配置正确，这是Tailwind正常编译的前置依赖：

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

3. 重启开发服务
   修改完配置后停止当前的开发服务，重新执行启动命令即可生效。如果是Linux/Mac系统出现监听失效的情况，可以执行以下命令调高系统文件监听上限：
   echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

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