不能直接在tailwind.config.js的theme.extend.colors中使用var(--primary)，因Tailwind构建时需静态解析颜色值以生成色阶和变体，而var()是运行时机制；正确做法是用任意值语法如text-[color:var(--text-primary)]，并确保content配置启用扫描。
如何在 Tailwind CSS 中用 var() 引用 CSS 变量
不能直接在 tailwind.config.js 的 theme.extend.colors 里写 var(--primary) —— Tailwind 在构建时静态解析配置，此时 CSS 变量尚未注入，会报错或被忽略。
正确做法是绕过配置层，在 class 定义中用 var() 直接绑定。Tailwind 支持在任意 utility class 的值中使用 var()（需开启 content 扫描并确保类名实际出现在源码中）：
- 在 HTML 或 JSX 中写类似
text-[color:var(--text-primary)]、bg-[var(--bg-surface)]的“任意值”语法 - 必须启用
content配置，让 Tailwind 能扫描到这些字符串并生成对应 CSS 规则 - 变量名需带连字符（如
--primary-500），符合 CSS 自定义属性命名规范
为什么 text-[var(--text-color)] 有时不生效
常见原因不是语法错，而是 CSS 优先级或变量未定义：
-
var(--text-color)如果在根元素（:root）没声明，或被后续样式覆盖，就会回退到初始值（比如currentColor或inherit） - 某些 utility 如
text-blue-500会设置color+font-weight等多个属性，而text-[color:var(--text-color)]只设color，可能被其他 class 干扰 - 避免混用：不要同时写
text-blue-500 text-[color:var(--text-color)]，后者会被前者覆盖（除非加!important，但不推荐）
如何配合 JS 动态切换皮肤而不重刷页面
核心是只改 :root 下的 CSS 变量，所有引用 var() 的 class 自动响应：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.setProperty('--bg-surface', '#1e293b');
document.documentElement.style.setProperty('--text-primary', '#f1f5f9');
- 建议把整套皮肤变量封装成对象，用
Object.entries()批量 set - 切换前可先存当前主题到
localStorage，刷新后通过:root初始化脚本恢复 - 注意深色模式媒体查询冲突：如果同时用了
@media (prefers-color-scheme: dark)和 JS 切换，需明确优先级（JS 设置应覆盖媒体查询）
性能与兼容性要注意什么
这种方案本质是纯 CSS 运行时计算，性能开销极小，但有两个硬限制：
- IE 完全不支持
var()，若需兼容，必须降级为 class 切换（如dark:...）+ JS 控制class属性 - 任意值语法（
[color:var(--x)]）要求 Tailwind v3.0+，v2.x 不支持，会静默忽略 - 大量使用
[background:var(--bg)]类型写法会略微增大生成的 CSS 文件体积，因每个唯一值都会生成独立规则
真正难的是变量命名收敛和主题状态管理——CSS 变量本身无作用域，一不小心就全局污染，建议按模块前缀划分（如 --card-bg、--form-border），而不是堆砌 --color-1、--color-2。
