运行时切换主题只能用CSS变量+data-theme+JS动态设置，因Tailwind是构建时工具；需将--primary等变量定义在:root或[data-theme]全局作用域，配合safelist放行var()语法，并统一命名规范。
不能靠改 tailwind.config.js 里的 theme.colors 实时换色——Tailwind 是构建时工具，所有 class 都在打包阶段固化。真正能运行时切换主题的，只有 CSS 变量 + data-theme + JS 动态设置这一条路。
为什么 text-[var(--primary)] 不生效
不是写法错，而是变量没挂对地方或被覆盖：
-
--primary必须定义在:root或[data-theme="dark"]这类全局作用域下，不能只写在组件 scoped style 里 - 如果同时用了
text-blue-500和text-[var(--primary)]，前者会覆盖后者（它设了color和font-weight） - VS Code 插件标红 ≠ 编译失败，只要
safelist放行了该字符串，就能生成对应规则
如何让 bg-[var(--color-bg)] 安全通过构建
Tailwind 默认忽略无法静态分析的 var() 值，必须显式放行：
- 在
tailwind.config.js中配置safelist: [/^bg-\[.*\]$/, /^text-\[.*\]$/] -
bg-[var(--color-bg)]中括号内不能有空格，且必须是英文半角字符，var( --color-bg )会编译失败 - 变量名要符合 CSS 自定义属性规范：必须以
--开头，如--color-bg，不能写成color-bg
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()批量初始化，防止首屏闪动
为什么 dark: 前缀不能用于自定义主题
dark: 是 Tailwind 对 prefers-color-scheme: dark 的硬编码映射，不是通用“主题前缀”：
- 哪怕你写
data-theme="dark"，dark:bg-gray-900也完全不生效 - 混用
dark:和data-theme会导致样式优先级混乱，DevTools 里看到颜色忽明忽暗 - 第三方 UI 库（如 Headless UI）默认只生成
dark:类，不会识别data-theme - 想支持 “light / dark / blue” 这类可切换主题，就必须绕过
dark:，统一走 CSS 变量
最易被忽略的是变量命名一致性：项目里混用 --primary、--color-primary、--theme-primary，会导致部分组件换色、部分不动。统一收口到一套命名，并集中写在 @layer base 里，比写十个切换函数重要得多。
