为什么Tailwind CSS主题变量没有更新

Tailwind CSS 主题变量未更新的核心原因是配置未被正确读取或生效：一是 theme.extend.colors 未在 module.exports 顶层正确定义；二是修改 config 后未重启开发服务器；三是生成的 CSS 规则被更高优先级样式覆盖。

Tailwind CSS 主题变量没更新，基本不是变量写错了，而是它压根没被 Tailwind 读到、或者读到了但没进最终 CSS —— 核心问题集中在 tailwind.config.js 的配置位置、构建流程是否重载、以及 CSS 优先级是否被覆盖这三块。

tailwind.config.js 中的 theme.extend.colors 是否写对位置

Tailwind 只认 theme.extend.colors（或 theme.colors）在顶层 module.exports 对象里声明的值。如果你把它塞进了 plugins: [] 里、或者用 const colors = {...} 定义后忘了传进配置，变量就只是 JS 对象，不会影响生成的 CSS。

1. ✅ 正确位置：module.exports = { content: [...], theme: { extend: { colors: { primary: '#3b82f6' } } } }
2. ❌ 错误写法：theme: { colors: { primary: '#3b82f6' } }（没加 extend，会完全覆盖默认色板，导致 gray-500 等基础色失效）
3. ⚠️ 注意：改完 tailwind.config.js 必须重启开发服务器，HMR 不会监听这个文件

修改后 CSS 规则是否真被重新生成

哪怕配置写对了，如果构建工具没把新配置注入编译流程，旧 CSS 仍会继续运行。尤其在 Vite 或 Next.js 中，容易卡在缓存层。

1. 检查浏览器 DevTools → Elements → 选中元素 → Styles 面板，搜索 primary，确认生成的类（如 text-primary）对应规则里的 color 值是不是你设的新值
2. Vite 用户：清空 node_modules/.vite 和 dist 目录后重启；Next.js 用户需删 .next 并重启 next dev
3. 运行 npx tailwindcss -i ./src/input.css -o ./dist/output.css --content "./src/**/*.{js,jsx,ts,tsx}" 手动构建一次，看输出 CSS 里有没有你定义的 --tw-color-primary 或对应类

生成的类是否被更高权重的选择器压制

Tailwind 默认不加 !important，所以哪怕 text-primary 规则生成了，也可能被组件库内部更具体的选择器（如 .btn .text-primary）或内联 style 覆盖。

1. 用 DevTools 检查目标元素的 computed color，看来源是哪条规则；若显示为 inherit 或其他颜色，说明你的 text-primary 没生效
2. 临时启用 important: true 测试：在 tailwind.config.js 顶层加 important: true，再看是否生效 —— 若此时好了，就是优先级问题
3. 避免在组件里写 style={{ color: '#3b82f6' }}，它会绕过主题系统，且硬编码值无法响应深色模式等动态逻辑

最常被忽略的是：改了 tailwind.config.js 却没重启服务，或者以为 HMR 会自动接管配置变更 —— 它不会。Tailwind 的配置是一次性读取的，任何改动都必须冷启动才生效。