不能在 tailwind.config.js 的 theme.extend.colors 中直接使用 var(--primary)，因为 Tailwind 构建时需静态解析颜色值以生成各类变体（如 bg-primary-500），而 CSS 变量是运行时求值的，无法提取 r/g/b 分量，导致变体缺失、NaN 错误及深色模式失效。
不能在 tailwind.config.js 的 theme.extend.colors 里直接写 var(--primary)——Tailwind 构建时会报错或生成无效类，这不是配置姿势问题，是底层设计限制。
为什么 var(--x) 塞进 colors 配置就崩
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无效，因为变量本身没切换逻辑
用 @theme 规则（Tailwind v4+ 推荐）
v4 原生支持 @theme at-rule，是目前最干净的方案。它让 CSS 变量直接成为 Tailwind 主题的一部分，无需插件、不绕开变体系统，还能配合 data-theme 切换。
- 在主 CSS 文件（如
src/index.css）里写：@import "tailwindcss";<br>@theme {<br> --color-primary: oklch(0.55 0.27 262);<br>}<br>[data-theme="purple"] {<br> --color-primary: oklch(0.55 0.27 304);<br>} - 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 {<br> .text-primary { @apply text-[color:var(--primary)]; }<br> .bg-accent { @apply bg-[var(--accent)]; }<br>} - 必须加
safelist放行正则：/^text-\[.*\]$/、/^bg-\[.*\]$/ -
[color:var(--x)]是 Tailwind 3.0+ 支持的任意值语法，必须带方括号；v2.x 不支持，会静默忽略 -
bg-[var(--primary)]中括号内不能有空格，且必须是英文半角字符，否则构建报错
JS 切换主题时最易漏掉的三件事
只改 RGB 值，不处理 alpha 通道，会导致 bg-primary/70 这类带透明度的 class 失效；Tailwind 编译出的透明度规则依赖 rgb(var(--primary) / var(--primary-alpha, 1)) 结构。
- 变量名要符合 CSS 自定义属性规范：必须以
--开头，如--primary，不能写成primary - 只设
--primary，不配套设--primary-alpha，bg-primary/70就不会按预期生效 - 如果同时用了
text-blue-500和text-[var(--primary)]，前者会覆盖后者（它设了color和font-weight）
真正能运行时换主色调的，只有 CSS 变量 + 任意值语法 + JS 动态设置这一条路。所有 var() 必须出现在 CSS 文件中，且依赖于级联顺序和作用域。
