<p>Tailwind CSS v4 的主题配置必须写在 CSS 文件里，用 @theme 声明带标准前缀的 CSS 变量，tailwind.config.js 中的 theme.extend.colors 等字段已完全失效——Oxide 引擎压根不读它；@theme 必须紧接 @import 'tailwindcss'; 之后、同文件内、变量名带 --color- 前缀（如 --color-primary），否则 bg-primary 等类静默不生成。</p>
直接说结论：Tailwind CSS v4 的主题配置必须写在 CSS 文件里，用 @theme 声明带标准前缀的 CSS 变量，tailwind.config.js 里的 theme.extend.colors 等字段已完全失效——不是优先级低，是 Oxide 引擎压根不读它。
为什么 bg-primary 不生成？只因 @theme 写错了位置或格式
常见错误现象是：写了 --primary: #3b82f6 却发现 bg-primary 类根本没出现在最终 CSS 中。这不是构建失败，而是静默跳过。
-
@theme必须紧接在@import 'tailwindcss';之后，且在同一 CSS 文件内（跨@import的文件不生效） - 变量名必须带强制前缀：
--color-primary✅，--primary❌、--my-color❌ - 值支持
HEX/RGB/HSL，但只有OKLCH（如oklch(0.62 0.15 274)）能触发自动明度阶梯生成（用于dark:bg-primary等暗色变体） - 哪怕
tailwind.config.js存在且写了theme.extend.colors.primary: '#3b82f6'，只要没在 CSS 里声明@theme { --color-primary: #3b82f6; }，就等于没配
@config 和 tailwind.config.js 到底谁管什么？
@config 是纯 CSS 内联配置，只影响当前文件；tailwind.config.js 现在只剩两个作用：指定 content 扫描路径（当自动检测失败时），以及加载插件（如 daisyui）。
-
@config必须出现在@import 'tailwindcss';之前，顺序错 = 没写 - 支持静态项：
theme.colors、theme.spacing、theme.fontSize、theme.borderRadius，但不支持plugins、darkMode、content -
tailwind.config.js中的theme字段全被跳过，仅content和plugins有效 - 二者共存时，
@theme声明的颜色会覆盖 JS 配置里的同名项——不是因为优先级高，而是 JS 那部分压根没被读
暗色模式、断点、自定义工具类怎么配？全在 CSS 层
v4 把这些能力全部迁移到 CSS 层，不再依赖 JS 插件或配置项。没有 darkMode: "class" 这种写法了。
立即学习“前端免费学习笔记（深入）”；
- 暗色模式默认启用，通过
[data-theme="dark"]或@media (prefers-color-scheme: dark)触发，dark:bg-gray-800开箱即用 - 响应式断点直接用
@theme { --breakpoint-sm: 480px; }声明，会自动映射为sm:变体 - 自定义工具类用
@utility，支持嵌套（&:hover）、响应式（@lg）、暗色（@dark），例如：@utility sr-only { @apply absolute w-1 h-1 p-0; } -
@import 'tailwindcss';必须写对（单引号、末尾分号不可少），旧写法@tailwind base静默失效，基础工具类全不生成
最容易被忽略的是顺序和前缀：CSS 文件里 @import 和 @theme 的相对位置、变量名是否带 --color- 这类标准前缀，错一个字符就等于没配。VSCode IntelliSense 默认扫描 tailwind.config.js，删了它就得手动设 "tailwindCSS.experimental.configFile" 指向主 CSS 文件，否则编辑器里连提示都没有。
