tailwind 主色调需通过 css 变量 + 任意值语法 + js 动态设置实现运行时切换，因它是构建时工具；text-[var(--primary)] 不生效是因变量未定义在 :root 或 [data-theme] 下，或被静态 class 覆盖；需配置 safelist、规范变量命名（--开头）、同步设置 alpha 通道并统一收口至 @layer base。
直接改 tailwind.config.js 里的 theme.colors.primary 不会实时生效——Tailwind 是构建时工具，所有 class 都在打包阶段固化。真正能运行时换主色调的，只有 CSS 变量 + 任意值语法 + JS 动态设置这一条路。
为什么 text-[var(--primary)] 不显示颜色？
不是写法错，而是变量没挂对地方或被覆盖：
-
--primary必须定义在:root或[data-theme="xxx"]下，不能只写在组件 scoped style 里 - 如果同时用了
text-blue-500和text-[var(--primary)]，前者会覆盖后者（它设了color和font-weight） - VS Code 插件标红 ≠ 编译失败，只要
safelist放行了该字符串，就能生成对应规则
如何让 bg-[var(--primary)] 安全通过构建？
Tailwind 默认忽略无法静态分析的 var() 值，必须显式放行：
- 在
tailwind.config.js中配置safelist: [/^bg-\[.*\]$/, /^text-\[.*\]$/] -
bg-[var(--primary)]中括号内不能有空格，且必须是英文半角字符，否则构建报错 - 变量名要符合 CSS 自定义属性规范：必须以
--开头，如--primary，不能写成primary
JS 切换主色调时容易漏掉什么？
只改 RGB 值，不处理 alpha 通道，会导致 bg-primary/70 这类带透明度的 class 失效：
- Tailwind 编译出的透明度规则依赖
rgb(var(--primary) / var(--primary-alpha, 1))结构 - 安全做法是：JS 修改时同步设置
--primary-alpha（哪怕设为1） - 或者更干脆：避免用
/70后缀，改用bg-primary opacity-70组合 - 切换前建议用
document.documentElement.style.setProperty()批量初始化，防止首屏闪动
最易被忽略的是变量命名一致性：项目里混用 --primary、--color-primary、--theme-primary，会导致部分组件换色、部分不动。统一收口到一套命名，并集中写在 @layer base 里，比写十个切换函数重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
