运行时切换主题色必须用CSS自定义属性+Tailwind任意值语法+JS动态设置；需在:root定义--primary、safelist放行正则、同步设置--primary-alpha、统一命名并收口到@layer base。
不能靠改 tailwind.config.js 里的 theme.colors.primary 实现运行时切换——Tailwind 是构建时工具，所有 class 都在打包阶段固化。真正可行的路径只有一条：用 CSS 自定义属性（--primary） + Tailwind 的任意值语法（text-[var(--primary)]） + JS 动态设置变量值。
为什么 text-[var(--primary)] 不生效？
不是写法错，而是变量没挂对地方或被覆盖：
-
--primary必须定义在:root或[data-theme="dark"]这类全局作用域下，不能只写在组件<style scoped></style>里 - 如果同时用了
text-blue-500和text-[var(--primary)]，前者会覆盖后者（它设了color和font-weight） - VS Code 插件标红 ≠ 编译失败；只要
safelist放行了该字符串，就能生成对应规则
如何让 bg-[var(--primary)] 安全通过构建？
Tailwind 默认忽略无法静态分析的 var() 值，必须显式放行：
- 在
tailwind.config.js的safelist中加入/^bg-\[var\(--primary\)\]$/这类正则（注意转义） - 变量名必须以
--开头，不能写成primary - 推荐统一收口到
@layer base中定义，避免散落在多个文件里
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 里，比写十个切换函数重要得多。
