不能在 tailwind.config.js 的 theme.extend.colors 中直接使用 primary: 'var(--primary)'，因为 tailwind 构建时需静态解析颜色值生成各类变体（如 bg-primary-500），而 var(--primary) 是运行时变量，无法提取 rgb 分量，导致变体类缺失或失效。
不能在 tailwind.config.js 的 theme.extend.colors 里直接写 primary: 'var(--primary)' —— 这不是配置姿势问题，是 Tailwind 构建机制决定的硬限制：它需要静态 RGB 值来生成 bg-primary-500、hover:bg-primary-600、bg-primary/20 等所有变体类，而 var(--primary) 是运行时才求值的字符串，根本抽不出 r/g/b 分量。
为什么 primary: 'var(--primary)' 在配置里会崩
Tailwind 的颜色插件在构建时调用 parseColor() 解析每个颜色值。传入 'var(--primary)' 后，它拿到的是字面量字符串，不是数字，所以：
-
bg-primary类能生成（只是原样塞进 CSS），但bg-primary-500根本不出现 -
hover:bg-primary渲染出color: rgb(NaN)或静默失效 - 控制台可能报
Cannot read property 'r' of undefined -
dark:bg-primary无效，因为变量本身没切换逻辑
正确做法：用 @layer utilities + 任意值语法
真正能运行时换主色调的，只有 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）不支持该语法，会静默忽略
必须显式配置 safelist 才能生效
Tailwind JIT 模式默认忽略无法静态分析的 var() 值，必须显式放行：
- 在
tailwind.config.js中加入：safelist: [/^bg-\[.*\]$/, /^text-\[.*\]$/] - 或更精确地写：
['bg-[var(--primary)]', 'text-[var(--primary)]'] -
bg-[var(--primary)]中括号内不能有空格，且必须是英文半角字符，否则构建报错 - 变量名要符合 CSS 自定义属性规范：必须以
--开头，如--primary，不能写成primary
JS 切换主题时最易漏掉的三件事
只改 RGB 值，不处理 alpha 通道，会导致 bg-primary/70 这类带透明度的 class 失效；Tailwind 编译出的透明度规则依赖 rgb(var(--primary) / var(--primary-alpha, 1)) 结构。
- 只设
--primary，但没同步更新--primary-alpha，bg-primary/50就不会变 - 变量没挂对地方：必须定义在
:root或[data-theme]下，不能只写在组件 scoped style 里 - 命名不统一或作用域冲突：比如深色模式下写了
.dark :root { --primary: #60a5fa; }，但没确保层序高于其他重定义
真正运行时可变的主题，只能靠 CSS 变量驱动，而 Tailwind 的配置层只负责静态生成——这两者必须分清职责，否则所有 hover、dark、/alpha 都会悄无声息地失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
