tailwind 不支持在 theme.extend.colors 中直接使用 var(--primary)，因其构建阶段需静态 rgb 值生成色阶变体，而 css 变量仅运行时可求值；推荐 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 变量只能在浏览器运行时求值，构建阶段根本抽不出 r/g/b 分量。
为什么 primary: 'var(--primary)' 在 config 里会崩
Tailwind 的颜色插件会在构建时调用 parseColor() 解析每个颜色值，用于推导色阶、暗化逻辑、透明度叠加等。传入 'var(--primary)' 后，函数拿到的是字符串字面量，不是可计算的颜色对象，结果就是：
-
bg-primary类能生成，但bg-primary-500、hover:bg-primary全部缺失 - 控制台报
Cannot read property 'r' of undefined或静默跳过 - 渲染出
color: rgb(NaN)、background-color: var(--primary)却无实际效果（因未定义或作用域不对） -
dark:bg-primary完全无效——变量本身没切换逻辑，Tailwind 也不会自动注入暗色模式规则
用 @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)更可控
用 @layer utilities 手动绑定（兼容 v3 或精细控制）
如果你还在用 v3，或只需要某几个类响应变量（比如只给背景用，不参与文本色变体），就放弃 colors 扩展，改用 @layer utilities 显式绑定。
- 在 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)]中括号内不能有空格，且必须是英文半角字符，否则构建报错
哪些地方最容易被忽略
真正卡住人的往往不是语法，而是变量作用域和 fallback 缺失：
-
:root里声明的变量，若被[data-theme="dark"]覆盖，必须确保该 selector 确实命中了html元素，而不是仅作用于某个子容器 - 没加
safelist时，JIT 模式下bg-[var(--x)]类根本不会生成，页面看起来“什么都没变” -
hover:bg-[var(--x)]不会被识别——Tailwind 不支持状态前缀 + 任意值组合，悬停逻辑得靠纯 CSS 补充 - 变量名区分大小写：
--Primary和--primary是两个变量，拼错后浏览器取不到值，默认回退为transparent，控制台无报错，极难排查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
