运行时换肤唯一可行路径是 data-theme + CSS 变量，需将主题变量挂到 :root 或 [data-theme] 下，用 bg-[var(--color-bg)] 等任意值语法引用，并在 @layer base 中声明、safelist 中放行，同时同步设置 --*-alpha 避免 /70 类失效。
直接改 tailwind.config.js 不行，构建时就固化了
你改完 theme.colors.primary 再重新 npm run build，确实能换色，但那只是“编译时换肤”——每个品牌一套产物，部署、缓存、CDN 都得翻倍。真实业务里二十个客户，不可能维护二十个构建流程。Tailwind 的 class 名（比如 bg-primary）在打包阶段就被映射成固定 CSS 规则，运行时无法重定向到新颜色。
data-theme + var(--color-bg) 是唯一可行路径
必须把主题变量抽出来，挂到 :root 或 [data-theme="blue"] 下，再用 Tailwind 的任意值语法引用：
-
bg-[var(--color-bg)]、text-[color:var(--text-primary)]这类写法才能响应运行时变化 -
data-theme必须设在标签上，否则子元素继承不到 - 所有变量声明必须收口到
@layer base块里，不然会被 Tailwind 默认样式覆盖 - 在
tailwind.config.js的safelist中显式放行：['bg-[var(--color-bg)]', 'text-[color:var(--text-primary)]']，否则 PurgeCSS 会删掉这些规则
JS 切换时漏掉 --*-alpha 会导致 /70 类失效
Tailwind 编译透明度后缀（如 bg-primary/70）依赖 rgb(var(--primary) / var(--primary-alpha, 1)) 结构。如果你只用 JS 改了 --primary，没同步设置 --primary-alpha，那所有带 /n 的 class 都会回退为不透明。
- 安全做法是：每次调用
document.documentElement.style.setProperty()时，一并设置--primary-alpha（哪怕设为1） - 或者干脆放弃
/70写法，改用bg-primary opacity-70组合 - 首帧闪动常见于变量未初始化：建议在
里内联一组默认值，比如:root { --color-bg: #fff; --color-text: #1f2937; }
别碰第三方主题插件，尤其 tailwindcss-theming
这类插件会劫持 theme.colors 解析逻辑，导致：
- DevTools 里点开
bg-primary查不到最终变量来源，调试断链 -
@apply或group-hover:bg-primary可能生成错误规则或丢失上下文 - Tailwind v4 升级后大概率崩溃，插件依赖内部 AST 解析，官方不承诺兼容
- 变量命名混乱（
--primaryvs--theme-primary）会让部分组件换色、部分不动，排查成本远高于写切换逻辑
真正难的不是切换动作本身，而是变量定义位置、初始化时机、命名一致性这三点——它们不出问题，换肤就稳；出一点，整个主题链就断在看不见的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
