运行时换肤唯一可行路径是CSS自定义属性+Tailwind任意值语法+JS动态设置；需在:root或[data-theme]下定义--变量、safelist放行正则、@layer base统一收口、同步设置alpha通道并初始化防闪动。
不能靠改 tailwind.config.js 里的 theme.colors 实现运行时换肤——Tailwind 是构建时工具，所有 utility class 都在打包阶段固化。真正能动态换肤的，只有一条路径：用 CSS 自定义属性（--primary） + Tailwind 任意值语法（bg-[var(--bg-surface)]） + JS 动态设置变量值。
为什么 text-[var(--primary)] 不生效
不是写法错，而是变量没挂对地方或被覆盖：
-
--primary必须定义在:root或[data-theme="dark"]这类全局作用域下，不能只写在组件里 - 混用
text-blue-500和text-[var(--primary)]时，前者会覆盖后者（它同时设置了color和font-weight） - VS Code 插件标红 ≠ 编译失败；只要
safelist放行了该字符串，就能生成对应规则
如何让 bg-[var(--bg-surface)] 安全通过构建
Tailwind 默认忽略无法静态分析的 var() 值，必须显式放行：
- 在
tailwind.config.js的safelist中加入正则：/^bg-\[var\(--bg-surface\)\]$/（注意括号、连字符和反斜杠都要转义） - 变量名必须以
--开头，不能写成primary或bgSurface - 推荐统一收口到
@layer base中定义，避免散落在多个文件里，比如：@layer base { :root { --bg-surface: #fff; --text-primary: #1e293b; } [data-theme="dark"] { --bg-surface: #1e293b; --text-primary: #f1f5f9; } }
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 加载顺序靠后、safelist 没配对、JS 设置时机太晚——这四个点只要漏一个，换肤就会半途失效。比写十个切换函数更重要的是把变量定义收口、命名对齐、初始化兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
