运行时换色唯一路径是css变量+任意值语法+js批量设置；需将变量定义在:root或[data-theme]下，safelist显式放行[var()]表达式，同步设置alpha变量并统一命名规范。
不能靠改 tailwind.config.js 实现运行时换色——Tailwind 是构建时工具，所有 class 都在打包阶段固化。真正能动态换主色调的，只有 CSS 变量 + 任意值语法 + JS 批量设置这唯一路径。
为什么 text-[var(--primary)] 不生效？
不是写法错，而是变量没挂对地方或被覆盖：
-
--primary必须定义在:root或[data-theme]下，不能只写在组件<style scoped></style>里 - 同时用了
text-blue-500和text-[var(--primary)]，前者会覆盖后者（它设了color和font-weight） - VS Code 插件标红 ≠ 编译失败；只要
safelist放行了该字符串，就能生成对应规则
如何让 bg-[var(--bg-surface)] 安全通过构建？
Tailwind 默认跳过无法静态分析的 [var()] 表达式，必须显式放行：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 在
tailwind.config.js的safelist中添加完整字符串：bg-[var(--bg-surface)]、text-[var(--text-primary)]等 - 变量名必须以
--开头，只含字母、数字、连字符、下划线；bg-[var( --bg-surface )]❌（空格导致构建报错） - 方括号内不能有空格：
bg-[var(--bg-surface)]✅
JS 切换主题时最容易漏掉什么？
只改 RGB 值，不处理 alpha 通道，会导致 bg-primary/70 这类带透明度的 class 失效：
- Tailwind 编译出的透明度规则依赖
rgb(var(--primary) / var(--primary-alpha, 1))结构 - 安全做法是：JS 修改
--primary时，同步设置--primary-alpha（哪怕设为1） - 或者更干脆：避免用
/70后缀，改用bg-primary opacity-70组合 - 切换前建议用
document.documentElement.style.setProperty()批量初始化变量，防止首屏闪动
最易被忽略的是变量命名一致性：项目里混用 --primary、--color-primary、--theme-primary，会导致部分组件换色、部分不动。统一收口到一套命名，并集中写在 @layer base 里，比写十个切换函数重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
