tailwind v3 不支持 var(--primary) 直接用于 theme.extend.colors，因其需静态 rgb 值生成透明度变体；正确做法是定义 --primary: 59, 130, 246 并配置 primary: 'rgb(var(--primary) / )'，配合 bg-primary/70 使用。
不能在 tailwind.config.js 的 theme.extend.colors 里写 primary: 'var(--primary)' 来支持动态透明度——这不是配置姿势问题，是 Tailwind v3 构建机制决定的硬限制：它需要静态 RGB 值生成 bg-primary-500、bg-primary/70 等类，而 var(--primary) 是运行时字符串，parseColor() 拿不到 r/g/b，结果就是变体全丢、hover:bg-primary 渲染出 rgb(NaN)、dark:bg-primary 完全无效。
为什么 bg-[var(--primary)]/50 不生效
斜杠修饰符（如 /50）只对「已知颜色值」起作用。Tailwind v3 的透明度解析器（withAlpha）不会处理方括号内的 var() 表达式，它只识别预设色名（red-500）、HEX（#3b82f6）或 rgb() 字符串。写 bg-[var(--primary)]/50 会被当作非法候选项静默丢弃，最终连基础类 bg-[var(--primary)] 都可能不生成（除非你加了 safelist）。
-
bg-[var(--primary)]/50→ 构建时报错或无输出，不是语法错，是 JIT 引擎白名单过滤掉的 - 即使
bg-[var(--primary)]能生成，/50也完全不参与解析，因为修饰符系统不触达任意值内部 - 想让透明度生效，必须让 Tailwind “看到”可解析的 RGB 结构，比如
rgb(var(--primary) / 0.5)
正确做法：用 rgb(var(--x) / <alpha>)</alpha> 替代 var(--x)
在 CSS 文件中定义变量时，不要只存 HEX，要存 RGB 分量，并配合 / 语法启用透明度通道。这是 Tailwind v3 唯一能静态解析并生成变体的方式。
- 在
src/index.css的@layer base中定义：:root { --primary: 59, 130, 246; }（注意：只写数字，不带rgb()） - 在
tailwind.config.js中扩展颜色：primary: 'rgb(var(--primary) / <alpha>)',</alpha>—— 这个<alpha></alpha>占位符会让 Tailwind 生成所有/xx变体 - 使用时直接写
bg-primary/70或text-primary/80，底层会编译为color-mix(in oklab, rgb(59 130 246 / 0.7), transparent)（v3.3+）或等效rgba()（v3.0–3.2） - 深色模式需单独重设：
@media (prefers-color-scheme: dark) { :root { --primary: 96, 165, 250; } }
JS 动态切换主题时必须同步 alpha 通道
如果用 JS 调用 document.documentElement.style.setProperty('--primary', '123, 45, 67') 切换颜色，但没动 alpha 相关变量，bg-primary/70 类会失效——因为 Tailwind 编译出的透明度规则依赖 rgb(var(--primary) / var(--primary-alpha, 1)) 这种结构，而你只改了 RGB 部分。
- 要么统一用单变量存完整 RGBA 字符串（如
--primary: 59, 130, 246, 0.8），然后配primary: 'rgba(var(--primary))'（但 v3 不支持自动解析四元组） - 更稳妥的是维护两个变量：
--primary-rgb和--primary-alpha，并在 config 中写：primary: 'rgb(var(--primary-rgb) / var(--primary-alpha, 1))' - 切换时必须同时调用两次
setProperty，漏一次就会导致所有带/的类渲染异常 - 变量名必须以
--开头，且中括号内不能有空格或中文，否则构建报错
最易被忽略的是：v3 不支持 @theme 规则，也没有原生 color-mix fallback，所以一旦变量未定义或拼写错误，浏览器会静默计算为 transparent，控制台不报错，排查只能靠 DevTools 里看 computed style 是否为空。务必在 :root 中提供兜底值，并用 safelist 放行正则 /^bg-primary\/\d+$/ 防止 JIT 清理掉动态生成的类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
