tailwind css v4仅保留content字段，其余如theme、plugins、darkmode等全部失效；必须用@import "tailwindcss";和@theme声明定制，且dark:等变体需手动定义。
升级 Tailwind CSS v4 后，tailwind.config.js 里写的 theme、plugins、darkMode 全部静默失效——不是你配错了，是 v4 的 Oxide 引擎根本不再读它们。
tailwind.config.js 中哪些字段还能用？
v4 只认 content 字段，其余全被忽略（包括 theme.extend、plugins: []、darkMode: 'class'、corePlugins 等）。删掉它们不是“可选优化”，而是必须动作，否则你会误以为配置还在生效。
-
content必须保留，且路径要覆盖所有含类名的文件（如"./src/**/*.{ts,tsx,jsx,html}"），漏路径 = 类不生成 -
module.exports = { content: [...] }是合法最小配置；空对象或只留content都行，但不能删整个文件 - 若项目用 Astro/Next.js App Router/Vite + MDX，注意
content要显式包含./app/**或./pages/**，自动扫描不可靠
@import "tailwindcss" 必须写对，否则基础类全丢
v4 废弃所有 @tailwind base/components/utilities，改用标准 CSS @import 触发引擎。语法错一个字符，Oxide 就静默跳过，不报错也不输出任何工具类。
- 必须写成：
@import "tailwindcss";（单引号 + 末尾分号，缺一不可） - 不能写双引号：
@import "tailwindcss";→ 无效 - 不能漏分号：
@import "tailwindcss"→ 无效 - 必须放在主 CSS 入口顶部（如
src/styles/tailwind.css），前面不能有注释、空行或其他@规则 - 若用 Vite 8，
@tailwindcss/vite插件尚不支持，得降级到 Vite 7 或暂用 v3
@theme 块替代 theme.extend，但命名和位置极敏感
颜色、间距、字体等定制必须挪到 CSS 文件中，用 @theme 声明。变量名不带前缀、顺序错位、跨文件引用，都会导致类名（如 bg-primary）完全不生成。
- 变量名必须带完整前缀：
--color-primary✅，--primary❌，--my-color❌ -
@theme必须紧接在@import "tailwindcss";后（中间可有空行，但不能有其他@规则） - 值不支持
var()引用：--color-primary: var(--my-blue)→ Oxide 不解析，直接跳过 - 作用域是文件级的：在
Button.css里写@theme，不会影响Header.css - OKLCH 值（如
oklch(0.62 0.15 274)）才能自动生成明度阶梯（primary-400/primary-600）
dark:、hover: 等变体类为什么全失效？
v4 移除了 darkMode 配置项，也不再内置 dark: 变体逻辑。交互类在 @apply 中也会丢失前缀，因为 Oxide 引擎不处理 PostCSS 阶段的展开。
- 启用暗色模式需手动加：
@custom-variant dark (&:where(.dark, .dark *));，必须紧跟@import后 -
@apply md:p-6 hover:bg-blue-500→ 编译后只剩p-6 bg-blue-500，md:和hover:被丢弃 - Vue/Svelte 的
<style scoped></style>中@apply几乎一定失效（JIT 扫描不到作用域内字符串） - 替代方案：用原生嵌套语法（需构建链支持 CSS Nesting），例如
.btn { &:hover { @apply bg-blue-600; } }
最易被忽略的是：v4 的按需生成机制比 v3 更严格，也更沉默。它不会警告你“theme 没生效”，也不会提示“content 漏了路径”——它只是安静地不生成那些类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
