tailwind css v4.0彻底弃用tailwind.config.js，仅支持css中@theme指令配置，因oxide引擎编译时只解析css指令、忽略js文件，旧配置无效且无警告。
Tailwind CSS 4.0 不再需要 tailwind.config.js —— 配置直接写进 CSS 文件里，用 @theme 指令就行。这不是“可选”，而是默认且唯一支持的配置路径。
为什么 tailwind.config.js 被移除了
v4.0 彻底废弃了 JavaScript 配置文件机制。Oxide 引擎在编译阶段只读取 CSS 中的 @theme、@breakpoints 等指令，不再解析 JS 配置。如果你还留着 tailwind.config.js，它会被完全忽略，连警告都不会抛出。
- 旧项目升级时，删掉
tailwind.config.js是必须动作，不是“可以保留” - CLI 工具（如
npm run build）不会报错，但所有你在 JS 文件里写的theme.extend都无效 - 插件生态正在迁移：目前
tailwindcss/forms等主流插件已支持 CSS 优先模式，但自定义插件若依赖config.theme对象，会直接失效
@theme 指令怎么写才生效
@theme 必须出现在你项目主 CSS 入口文件中（比如 src/styles.css），且需在 @tailwind utilities 之前。它不是 CSS 规则，而是一个编译时指令，语法接近 CSS 自定义属性声明，但支持嵌套和函数式值。
- 基础颜色定义：
@theme { --color-primary-500: oklch(60% 0.25 270); }→ 自动生成text-primary-500、bg-primary-500等类 - 断点要写
@breakpoints，不是@theme里塞--breakpoint-md：例如@breakpoints { md: 768px; lg: 1024px; } - 不能用 JS 表达式或变量引用：写
--space-4: calc(var(--space-2) * 2)会失败，v4 不支持 CSS 变量计算回溯 - OKLCH 是默认色彩空间，直接写
rgb(255, 0, 0)也能用，但会自动转为 OKLCH；手动写 OKLCH 能更好控制色相均匀性
暗色模式、间距、状态变体还用配吗
大部分开箱即用，但行为逻辑变了：它们现在由 CSS 指令隐式启用，而不是靠配置开关。
- 暗色模式默认启用，无需
darkMode: "class"或media—— 只要 HTML 有darkclass 或系统启用了prefers-color-scheme: dark，dark:变体就自动生效 - 间距系统仍用
px-/py-等前缀，但梯度值不再来自 JS 的theme.spacing，而是由@theme { --space-1: 0.25rem; --space-2: 0.5rem; ... }定义 -
hover:、group-hover:这些状态变体无需额外配置，但组合条件如md:hover:underline要求@breakpoints和@theme都已正确定义，否则该类不会生成 - 响应式类名（如
md:flex-row）的断点前缀必须与@breakpoints中声明的 key 完全一致，大小写敏感
容易被忽略的兼容性细节
迁移不是改个文件名就完事。最常踩的坑藏在构建链路和协作习惯里：
- Vite / Next.js / Remix 等框架的 PostCSS 插件需升级到支持 Oxide 引擎的版本（如
tailwindcss@^4.0.0），旧版postcss-import可能跳过@theme块 - CSS 文件里如果用
@import引入其他 CSS，@theme必须在被 import 的文件中，不能只放在入口文件顶部——Oxide 是按文件粒度扫描指令的 - VS Code 的 Tailwind IntelliSense 插件 v4+ 才能识别
@theme并提供类名补全；v3 插件会显示“no utility found” - CI 构建失败时错误信息极简，常见是 “no @theme found”，实际原因可能是 CSS 文件路径没被
content字段覆盖，或@theme写在了@tailwind utilities之后
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
