Tailwind Utility classes内联无效 仅在CSS文件中生效的解决方法

按下面顺序逐个排查即可，这类问题基本都是配置细节或扫描规则问题：

• 首先修正content配置的glob语法错误
  你当前配置里的后缀列表逗号后加了多余空格，Tailwind依赖的fast-glob匹配规则不识别带空格的后缀写法，直接导致扫描不到js/tsx文件里的内联类名。把配置里所有后缀列表的空格删掉即可，你额外加的components扫描路径可以删掉，上层的./src/**/*.{js,jsx,ts,tsx}已经递归覆盖src下所有对应类型文件，不需要重复配置，修正后配置如下：

  module.exports = {
    content: [
      './src/**/*.{js,jsx,ts,tsx}',
      './public/index.html'
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };
  

• 检查全局CSS的Tailwind指令
  确认你项目全局引入的CSS文件里三行指令顺序正确、没有拼写错误，且这三行指令不能写在组件的scoped样式、CSS Module局部文件里：

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

• 清除构建缓存重启服务
  改完配置不要等热更新，直接停掉本地开发服务，执行下面的命令清除缓存后重启：

  # 删掉构建缓存和产物目录，Windows系统手动删除对应文件夹即可
  rm -rf node_modules/.cache dist
  npm run dev
  

  如果还是不生效，直接删掉node_modules和锁文件重装依赖：

  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  npm install
  npm run dev
  

• 排查类名写法问题
  Tailwind是静态扫描文件提取类名的，不支持字符串拼接的动态类名，比如className={mt-${size}}这类写法会扫描不到，必须写完整的静态类名，确实需要动态生成的类要提前在配置的safelist字段里声明。
• 排查样式覆盖问题
  打开浏览器开发者工具，选中写了内联Tailwind类但没生效的元素：
  • 如果Elements面板的Styles里根本找不到对应Tailwind类的规则，还是前面的扫描、缓存、配置问题
  • 如果能找到对应规则但是被划掉，说明有其他更高优先级的CSS（比如自定义全局样式、第三方UI库样式）覆盖了Tailwind规则，调整样式优先级即可。

你提到把类写在CSS文件里可以正常生效，本质是因为写在CSS文件里的Tailwind类能被正常扫描到，而内联在js/tsx里的类因为配置的glob语法错误没被扫描到，优先修正第一个配置问题，基本可以直接解决。

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