React+TS项目Tailwind CSS背景类及自定义主题不生效问题

按以下优先级逐一排查修复即可解决问题： #

1. 确认Tailwind版本匹配 #

bg-sky-500、bg-slate-500是Tailwind CSS v3版本才内置的默认色值，v2版本默认调色板没有这组颜色。

• 执行npm list tailwindcss查看本地安装版本
• 如果版本号为2.x，直接升级到v3稳定版：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 修正配置文件错误 #

当前配置存在3个直接导致失效的问题：

• 自定义主题配置写错文件：你提到修改tailwindcss.config.json，但项目实际读取的配置文件是根目录下的tailwind.config.ts，改对文件自定义配置才会生效
• 配置项版本混用：Tailwind v3已经废弃了独立的purge字段，内容扫描规则统一在content字段配置，空的purge配置、冗余的variants配置都可以删除
• 配置缺少校验提示：可以在配置顶部加类型注释，避免写错配置项
• 修正后可用的tailwind.config.ts参考：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html"
  ],
  darkMode: false,
  theme: {
    extend: {
      // 自定义主题规则写在此处即可生效
    },
  },
  plugins: [],
}

3. 修复全局CSS指令错误 #

你的index.css中@tailwind forms;是错误写法：

• @tailwind指令仅支持引入Tailwind原生的base/components/utilities三个模块，@tailwindcss/forms是独立插件，不能通过该指令引入
• 如果需要使用forms插件，先执行npm install -D @tailwindcss/forms安装，再在tailwind.config.ts的plugins数组中注册：

plugins: [
  require('@tailwindcss/forms'),
],

• 修正后的index.css仅保留三个基础指令即可：

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

注意：index.css必须在项目React入口文件（通常是src/main.tsx）中全局引入，仅在Storybook的preview.ts中引入的话，主应用运行时不会加载Tailwind样式 #

4. 修复Storybook配置冲突 #

你贴出的Storybook配置文件（.storybook/main.ts）存在两个问题：

• CSS匹配正则写错：test: /\,css&/是转义错误的无效正则，正确匹配CSS文件的正则为/\.css$/
• 重复配置PostCSS规则：你已经在根目录写了postcss.config.ts，不需要在Storybook的webpack配置里重复声明postcss-loader和tailwindcss/autoprefixer插件，重复配置会覆盖全局规则导致Tailwind编译异常
• 处理方式：直接删除webpackFinal中手动添加CSS处理规则的代码块，复用全局PostCSS配置即可。

5. 清缓存验证 #

所有修改完成后做以下操作排除缓存影响：

• 删除项目下node_modules/.cache缓存目录
• 重启本地开发服务
• 打开浏览器开发者工具，选中对应元素检查：
  • 确认元素class上确实写了对应的Tailwind类名
  • 确认Styles面板中能看到对应类的CSS规则，没有被其他更高优先级的自定义样式覆盖

快速排查优先级问题的技巧：给类名加!前缀（比如!bg-sky-500）强制提升样式优先级，如果加完颜色能正常显示，说明是其他全局CSS选择器优先级高于Tailwind类，调整自定义全局样式的选择器即可。

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