不能在 tailwind.config.js 中用 var(--x) 作颜色值生成变体，因 tailwind 构建时无法解析 css 变量，导致 hover 等状态类失效；正确做法是提供完整色阶对象或使用 safelist 的 bg-[var(--x)] 任意值语法。
不能直接在 tailwind.config.js 里用 var(--x) 当颜色值参与变体生成——Tailwind 的颜色系统需要可解析的 RGB/HSL 值来推导 hover、dark、disabled 等状态类，而 var(--x) 是运行时才求值的字符串，无法提取亮度或生成色阶。
为什么 primary: 'var(--primary-color)' 会导致 hover 类失效
Tailwind 的 backgroundColor 插件会尝试对颜色值做 parseColor 操作：提取 r/g/b 分量、计算暗化比例、生成 bg-primary-hover 对应的 rgb(...)。遇到 var(--primary-color) 就会卡住，抛出 Cannot read property 'r' of undefined 或静默跳过该变体。
- 现象：页面能显示
bg-primary，但hover:bg-primary完全不生效，控制台无报错 - 根本原因：Tailwind 构建阶段不执行 CSS 变量求值，
var(--x)被原样塞进生成的 CSS，浏览器在 hover 时才计算——但 Tailwind 已经没机会为它生成对应规则了 - 正确做法：若需变体支持，必须提供完整色阶对象，如
'brand-blue': { '50': '#eff6ff', '500': '#3b82f6', '900': '#1e40af' }
bg-[var(--bg-color)] 这种任意值写法怎么用才安全
这是唯一能真正响应运行时变量变化的路径，但它绕过了 Tailwind 的颜色系统，不生成任何变体类，只生成单条声明。
- 必须确保
--bg-color在作用域内已定义（推荐在:root或[data-theme="xxx"]下） - 要启用它，得在
tailwind.config.js的safelist里显式加入，否则 JIT 模式下不会生成：['bg-[var(--bg-color)]'] - 不能和
hover:组合使用（hover:bg-[var(--bg-color)]不会被识别），想实现悬停效果得靠纯 CSS：.card:hover { background-color: var(--bg-hover); } - 注意拼写：CSS 变量名区分大小写，
--Bg-Color和--bg-color是两个变量
深色模式下 data-theme 和 prefers-color-scheme 怎么共存
别混用。系统级暗色检测（prefers-color-scheme: dark）和用户手动切换（data-theme="dark"）是两套逻辑，强行叠加会导致优先级冲突，比如 dark:bg-blue-900 在 data-theme="custom" 下被意外覆盖。
- 统一用
data-theme：把html标签设为，所有主题变量都走[data-theme="light"]/[data-theme="dark"]块覆盖 - 初始值可读取
matchMedia('(prefers-color-scheme: dark)').matches，但后续切换完全由 JS 控制，不依赖媒体查询 - CSS 变量定义必须放在
@layer base中，否则可能被 Tailwind 默认样式压掉 - 深色变量不要只写
.dark { --color-bg: #111; }，因为.dark类和data-theme是不同机制，容易漏匹配
真正麻烦的不是配置本身，而是变量未定义时的静默失败——浏览器把 var(--missing) 当成 transparent 或继承值，DevTools 里看不出异常，得靠手动检查 :root 和对应 [data-theme] 块里是否真有那个变量声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
