直接用Tailwind的theme.extend.colors不够用，因其为静态配置，无法运行时切换；需结合CSS变量（如var(--primary)）与JS动态赋值，使bg-primary等类编译为background-color: var(--primary)，再通过document.documentElement.style.setProperty批量更新变量实现换肤。
为什么直接用 Tailwind 的 theme.extend.colors 不够用？
因为静态配置无法在运行时切换。你改了 tailwind.config.js 里的颜色，得重新构建、刷新页面，根本做不到用户点一下就换肤。真正需要的是：CSS 变量（--primary、--bg）在 JS 中动态赋值，再让 Tailwind 的 utility class 能“读取”这些变量。
怎么让 bg-primary 这类 class 真正响应 CSS 变量？
不能只靠 theme.extend 写死值，得把 Tailwind 颜色映射到 CSS 变量上。核心是两步：
- 在
tailwind.config.js的theme.extend.colors中，用var(--primary)这种语法代替具体颜色值 - 确保 HTML 根元素（
:root）或目标容器上有对应变量定义，比如--primary: #3b82f6;
示例配置：
module.exports = {
theme: {
extend: {
colors: {
primary: 'var(--primary)',
bg: 'var(--bg)',
text: 'var(--text)',
}
}
}
}
这样写后，bg-primary 实际编译为 background-color: var(--primary);，JS 就能随时改 --primary 值来驱动变化。
立即学习“前端免费学习笔记（深入）”；
切换皮肤时 JS 怎么安全设置多个 CSS 变量？
别一个个 document.documentElement.style.setProperty，容易漏、难维护。推荐用对象批量注入：
- 定义皮肤配置对象，如
{ primary: '#ef4444', bg: '#1f2937', text: '#f9fafb' } - 用
Object.entries()遍历，统一设到:root - 注意变量名要带
--前缀，且值必须是合法 CSS 字符串（如带单位、引号等）
简单实现：
function setTheme(themeObj) {
Object.entries(themeObj).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--${key}`, value)
})
}
setTheme({ primary: '#8b5cf6', bg: '#ffffff', text: '#111827' })
哪些地方最容易出错？
三个高频坑：
- 忘记在
tailwind.config.js中启用darkMode: 'class'或自定义 mode——否则即使变量变了，dark:bg-primary这类变体不会响应 - CSS 变量作用域不对：如果把变量设在某个组件内部的
div上，但bg-primary在全局用，那就读不到 - 变量值非法：比如传入
undefined或空字符串，会导致var(--primary)计算失败，降级成浏览器默认色（通常是透明或黑色）
最稳妥的做法是：所有皮肤变量统一挂到 :root，初始值在 CSS 中兜底，JS 切换时只覆盖必要项。
