tailwind css v4 中 bg-primary 不生成，是因为引擎只扫描 css 中的 @theme 指令，不解析 tailwind.config.js 中的 theme.extend.colors；必须在 css 文件中用 @theme { --color-primary: #3b82f6; } 声明且前缀正确，才能生成完整工具类及变体。
直接把 CSS 变量写进 tailwind.config.js 的 theme.extend.colors 里，bg-primary 不会生成——v4 的引擎压根不读它。
为什么 var(--primary) 在配置里会失效
v4 的 Oxide 引擎只扫描 CSS 源码里的指令（如 @theme），不解析 JS 配置中的动态值。你在 tailwind.config.js 里写 primary: 'var(--primary)'，会导致：
- 类名生成阶段无法解析变量，
bg-primary、text-primary全部丢失 - 即使生成了，hover / dark / 响应式等变体也拿不到计算后的颜色值，出现
color: rgb(NaN) - 所有基于该颜色的色阶（如
primary-500）都不会推导
@theme 是唯一可靠路径
v4 要求颜色、字体、间距等主题项必须用 @theme 规则声明在 CSS 文件中，且变量名必须带标准前缀：
- ✅ 正确：
@theme { --color-primary: #3b82f6; }→ 生成bg-primary、text-primary、border-primary - ✅ 支持 OKLCH：
--color-primary: oklch(0.55 0.27 262);→ 自动推导明度阶梯 - ❌ 错误：
--primary: #3b82f6;或--my-color: ...—— 引擎完全忽略 - ⚠️ 顺序重要：
@import "tailwindcss"必须在@theme之前，否则不生效
如何让 data-theme 切换真正起作用
光声明 --color-primary 不够，得配合作用域控制才能响应切换：
- 主 CSS 文件里写：
@import "tailwindcss"; @theme { --color-primary: #3b82f6; } - 再加一行覆盖：
[data-theme="dark"] { --color-primary: #2563eb; } - JS 切换只需：
document.documentElement.dataset.theme = 'dark'; - 所有
bg-primary、text-primary类自动更新，无需重渲染组件 - 别用
:root+@media (prefers-color-scheme: dark)，它无法响应 JS 主动切换
Vite / VSCode 常见断连点
工具链“看不见”你的变量，通常不是插件坏了，而是路径或顺序不对：
- VSCode IntelliSense 默认找
tailwind.config.js，删了它就得在设置里配"tailwindCSS.experimental.configFile" - Vite 构建跳过 Tailwind 处理？检查是否漏了
@import "tailwindcss"这一行，或它被写在了@plugin后面 - 多个 CSS 文件引入时，
@theme必须和@import "tailwindcss"在同一文件内，跨文件不生效 - 如果用了
@config声明断点或字体，它必须出现在@import "tailwindcss"之前，且不能包含函数或表达式
最易被忽略的是：哪怕你保留了 tailwind.config.js 并写满 theme.extend，只要没在 CSS 里用 @theme 声明变量，所有对应工具类就不存在——这不是 bug，是 v4 的设计前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
