Tailwind 不支持在 theme.extend.colors 中直接使用 var(--primary)，因其构建时需静态 RGB 值生成颜色变体，而 CSS 变量是运行时求值的字符串，无法解析出色相、亮度等分量，导致 bg-primary-500 等类缺失、hover:bg-primary 失效、dark:bg-primary 无效；v4 推荐用 @theme 规则原生支持变量主题，v3 可退而采用 @layer utilities 显式绑定并配置 safelist。
不能在 tailwind.config.js 的 theme.extend.colors 里写 var(--primary) ——这不是配置姿势问题，是 Tailwind 构建机制决定的硬限制：它需要静态 RGB 值来生成 bg-primary-500、hover:bg-primary-600、bg-primary/20 等所有变体，而 CSS 变量是运行时才求值的字符串，根本抽不出色相、亮度或透明度分量。
为什么 primary: 'var(--primary)' 在 config 里会崩
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完全无效——变量本身没切换逻辑，Tailwind 也不感知
想用 CSS 变量驱动主题？用 @theme（Tailwind v4+）
v4 原生支持 @theme at-rule，这是目前最干净的方案。它让 CSS 变量真正成为 Tailwind 主题的一部分，不绕开变体系统，还能配合 data-theme 切换。
- 在主 CSS 文件（如
src/index.css）里写：@import "tailwindcss";@theme {--color-primary: oklch(0.55 0.27 262);}[data-theme="purple"] {--color-primary: oklch(0.55 0.27 304);} - HTML 切主题只要一行 JS：
document.documentElement.dataset.theme = 'purple' - 所有引用
--color-primary的工具类（text-primary、bg-primary）自动响应，不用重渲染组件 - 变量作用域清晰：
:root默认值 +[data-theme]覆盖，比@media (prefers-color-scheme)更可控
还在用 v3 或需要精细控制？改用 @layer utilities
如果你必须兼容 v3，或只想让某个变量只用于背景、不参与文本色变体等特殊场景，就放弃 colors 扩展，显式绑定：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 文件里写：
@layer utilities {.text-primary { @apply text-[color:var(--primary)]; }.bg-accent { @apply bg-[var(--accent)]; }} - 必须加
safelist放行正则：/^text-\[.*\]$/、/^bg-\[.*\]$/ -
[color:var(--x)]是 Tailwind 3.0+ 支持的任意值语法，必须带方括号；v2.x 不支持，会静默忽略 -
bg-[var(--primary)]中括号内不能有空格，且必须是英文半角字符，否则构建报错
真正难的不是写法，而是变量定义时机和作用域——:root 里没声明、拼错名、或被 [data-theme] 覆盖不全，都会导致样式无声失效，浏览器控制台不报错，排查起来最耗时间。
