要用 JavaScript 修改 :root 上的 CSS 变量触发 Tailwind 主题切换，必须通过 document.documentElement.style.setProperty() 动态更新变量，并在 Tailwind 配置中将颜色映射为 var(--color-primary) 等 CSS 变量，同时在页面加载早期从 localStorage 读取并设置变量以避免闪屏。
如何用 JavaScript 修改 :root 上的 CSS 变量触发 Tailwind 主题切换
不能直接靠 Tailwind 的 dark: 前缀实现运行时换肤——它只在构建时生成静态类。真正生效的换肤必须手动更新 :root 中定义的 CSS 变量，再让 Tailwind 的自定义颜色（如 bg-primary）依赖这些变量。
前提是你的 Tailwind 配置里已把颜色映射到 CSS 变量，例如：
module.exports = {
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
}
}
}
}
否则改了变量，Tailwind 类也不会响应。
为什么 document.documentElement.style.setProperty() 是最简方案
这是唯一能精准、同步、无副作用地更新全局 CSS 变量的方式。其他方法（比如切 class、重载 stylesheet）要么不兼容、要么触发重排、要么破坏 SSR 一致性。
立即学习“Java免费学习笔记（深入）”；
-
document.documentElement对应:root，是所有 CSS 变量的作用域根节点 - 每次调用
style.setProperty('--color-primary', '#3b82f6')会立即生效，无需刷新或 re-render - 避免用
setAttribute('style', ...)—— 它会覆盖已有内联样式，丢失其他动态变量 - 如果变量值含单位（如
1rem），确保传入字符串完整形式；数值型变量（如透明度）也要转成字符串
如何安全持久化主题偏好并初始化变量
用户刷新页面后变量会重置，必须在 JS 加载早期就从 localStorage 读取并设置，否则出现「闪屏」（先默认色、再跳成目标色）。
推荐在 <head> 内嵌一段极简脚本，或在 DOMContentLoaded 最早时机执行：
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
document.documentElement.style.setProperty('--color-primary', savedTheme === 'dark' ? '#6366f1' : '#3b82f6');
注意两点：
- 不要等
React或Vuemount 后再设变量——那时 HTML 已渲染完毕，闪屏不可避免 - 用
data-theme属性辅助调试和条件样式（比如某些非 Tailwind 元素需额外适配） - 修改后记得同步写回
localStorage：localStorage.setItem('theme', 'dark')
常见错误：Tailwind 编译后颜色没变，但变量确实改了
典型现象：控制台确认 getComputedStyle(document.documentElement).getPropertyValue('--color-primary') 返回新值，但 bg-primary 背景仍是旧色。
原因几乎总是以下之一：
- Tailwind 配置中未将该颜色名（如
primary）映射到var(--color-primary)，而是写成了字面量（如#3b82f6） - CSS 变量名拼错，比如设的是
--primary-color，但 Tailwind 引用的是var(--color-primary) - 使用了
!important或更高优先级的样式覆盖了变量值（检查 computed styles 中的 actual value 是否被 override） - PostCSS 插件（如
postcss-custom-properties）在构建时静态内联了变量，导致运行时修改无效——关掉它，确保变量保留为var()
换肤不是改几个 class 就完事的事，核心是让变量真正驱动样式链。变量设错、配置没连上、初始化时机晚，三者任一出问题，都会看起来“动了但没完全动”。
