tailwind 不支持在 theme.extend.colors 中直接使用 var(--primary)，因其需静态解析颜色值生成变体类，而 css 变量是运行时求值，无法提取 rgb 分量，导致 bg-primary-500 等类缺失、深色模式失效；正确做法是在 css 中用 @layer base 定义变量、@layer utilities 结合 \[color:var(--x)\] 任意值语法，并配置 safelist 放行，同时 js 切换时须同步 alpha、统一命名、确保作用域与层序。
不能在 tailwind.config.js 的 theme.extend.colors 里直接写 var(--primary)——Tailwind 构建时会报错或生成无效类，这不是配置姿势问题，是底层设计限制。
为什么 var(--x) 放进配置里就崩
Tailwind 要静态解析每个颜色值，才能生成 bg-primary-500、hover:bg-primary-600、bg-primary/20 这类变体。而 var(--primary) 是运行时才求值的字符串，parseColor() 拿到的是字面量，根本抽不出 r/g/b 分量。
-
bg-primary类能生成，但bg-primary-500完全不出现 -
hover:bg-primary渲染出color: rgb(NaN)或直接崩溃 - 控制台可能报
Cannot read property 'r' of undefined - 深色模式类如
dark:bg-primary无效，因为变量本身没切换逻辑
想用 CSS 变量，必须绕过配置层
真正能运行时换主色调的，只有 CSS 变量 + 任意值语法 + JS 动态设置这一条路。所有 var() 必须出现在 CSS 文件中，且依赖于级联顺序和作用域。
- 在
src/index.css里用@layer base注入变量：:root { --primary: #3b82f6; } - 再用
@layer utilities绑定工具类：.text-primary { @apply text-[color:var(--primary)]; } -
[color:var(--x)]是 Tailwind 3.0+ 支持的任意值语法，必须带方括号 - 旧版本（v2.x）不支持该语法，会静默忽略
bg-[var(--x)] 为什么不生效
不是写法错，而是变量没挂对地方或被覆盖：--primary 必须定义在 :root 或 [data-theme] 下，不能只写在组件 scoped style 里。
- Tailwind 默认忽略无法静态分析的
var()值，必须显式放行：safelist: [/^bg-\[.*\]$/, /^text-\[.*\]$/] -
bg-[var(--primary)]中括号内不能有空格，且必须是英文半角字符，否则构建报错 - 变量名要符合 CSS 自定义属性规范：必须以
--开头，如--primary，不能写成primary - 如果同时用了
text-blue-500和text-[var(--primary)]，前者会覆盖后者（它设了color和font-weight）
JS 切换主题时最易漏掉的三件事
只改 RGB 值，不处理 alpha 通道，会导致 bg-primary/70 这类带透明度的 class 失效；Tailwind 编译出的透明度规则依赖 rgb(var(--primary) / var(--primary-alpha, 1)) 结构。
- 同步设置
--primary-alpha（哪怕设为1），或干脆避免用/70后缀，改用bg-primary opacity-70组合 - 切换前用
document.documentElement.style.setProperty()批量初始化，防止首屏闪动 - 变量命名必须统一：项目里混用
--primary、--color-primary、--theme-primary，会导致部分组件换色、部分不动
真正麻烦的不是写几行 JS，而是变量作用域、层序注入、safelist 放行、alpha 同步这四点全得对齐——少一个，页面就有一块颜色不跟着变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
