不能在tailwind.config.js的theme.extend.colors中直接使用var(--primary)，因tailwind构建时需静态解析颜色值生成变体类，而css变量是运行时求值，无法提取rgb分量，导致bg-primary-500等类缺失、深色模式失效；正确做法是在css中用@layer base定义变量、@layer utilities结合[color:var(--x)]任意值语法，并配置safelist放行。
直接在 :root 里改 --primary-color 没用，因为 Tailwind 工具类（比如 bg-primary）编译时已固化为静态颜色值，不读运行时变量。
tailwind.config.js 里写 var(--x) 会崩
Tailwind 构建阶段必须静态解析颜色，才能生成 hover:bg-primary、bg-primary/20 这类变体。而 var(--primary) 是运行时才求值的字符串，parseColor() 拿不到 r/g/b 分量，直接报 Cannot read property 'r' of undefined 或静默跳过——结果就是 hover 类完全不生成，深色模式失效，控制台却没提示。
- 错误写法：
primary: 'var(--primary)'（配置里塞 var 表达式） - 正确替代：提供完整色阶对象，如
primary: { 50: '#eff6ff', 500: '#3b82f6' } - 若坚持用变量，只能走任意值语法：
bg-[var(--primary)]，但它不支持 hover/focus 等状态变体
bg-[var(--x)] 写了却没生效？检查这三处
任意值语法只做字符串替换，不校验变量是否存在或格式是否合法。常见失效原因：
-
--x没定义在:root或[data-theme]下，而是写在组件 scoped style 里 → 作用域不对 - 变量值格式错：比如
--bg: #3b82f6，但bg-[rgb(var(--bg))]要求是数字三元组 → 应写成--bg: 59, 130, 246 - 没加
safelist：JIT 模式默认忽略无法静态分析的任意值 → 必须在tailwind.config.js里显式放行：'bg-[var(--x)]'
@layer base 里定义变量，但顺序错了
Tailwind 解析任意值语法（如 text-[var(--color)]）只发生在 @tailwind base 阶段。如果你把变量定义在 @layer utilities 或普通 CSS 文件顶层，PostCSS 扫描时变量还没“出生”，工具类就编译完了。
- 必须这样写：
@layer base { :root { --color: #3b82f6; } } - 且确保
@tailwind base在所有@layer base声明之前引入（否则变量注册晚于解析时机） - 别信“加了
prefix: 'tw-'就万事大吉”——它只改类名，--tw-bg-opacity这类内部变量仍会被全局同名定义覆盖
最易被忽略的是：Tailwind 的变量系统是隐式依赖，不报错、不警告，只悄悄让 bg-red-500/30 半透明变浅、ring 颜色错乱——问题不在类名，而在 CSS 变量作用域和构建时序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
