tailwind css v4 是构建链路、配置模型和运行时能力的三重重构；oxide 引擎用 rust 重写，忽略 @tailwind 指令导致 preflight 等丢失，须改用 @import；@theme 替代 theme.extend，oklch 成默认色域，content 字段被移除，自动扫描仅支持标准 esm 路径。
Tailwind CSS v4 不是“小修小补”，而是构建链路、配置模型和运行时能力的三重重构。新项目直接上 v4 没问题，但旧项目升级前必须清楚哪些地方会静默失效。
性能提升来自 Oxide 引擎，但代价是兼容性断裂
Oxide 是用 Rust 重写的全新引擎，它不解析 @tailwind base、@tailwind components 这类指令——它们会被完全忽略，不报错，也不生成对应 CSS。这意味着：
- preflight 重置、表单默认样式、基础排版规则全部丢失，首页可能白屏或布局错乱
- 必须删掉所有
@tailwind指令，改用@import "tailwindcss" -
postcss.config.js中的tailwindcss()插件必须移除，否则与 Vite 插件冲突，样式可能被跳过或重复处理 - 全量构建从 378ms 降到 100ms，但前提是你的项目结构符合 Oxide 的 ESM 扫描逻辑
CSS 优先配置取代 tailwind.config.js，但 theme.extend 失效
v4 把设计系统定义移到 CSS 层，用 @theme 块替代 JS 配置：
@theme {
--font-display: "Satoshi", sans-serif;
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
}
这带来几个硬约束：
-
tailwind.config.js中的theme.extend已被废弃，无法再扩展颜色、间距等对象 - JS 配置仍可加载，但需显式启用，且不能混用
@theme和theme.extend - OKLCH 色彩空间成为默认，若你仍写
rgb(255, 0, 0)，渲染结果可能偏色（尤其在深色背景下） -
content字段被完全忽略，删掉更干净；自动扫描只识别标准 ESM import 路径，不处理className={`bg-${color}-500`}这类字符串拼接
原生 CSS 特性支持增强，但浏览器要求变高
v4 内置了对现代 CSS 功能的深度支持，但不是“向后兼容”：
- 级联层（
@layer）变成真实 CSS 层，能精确控制@layer base/@layer utilities的输出顺序，避免意外覆盖 - 容器查询开箱即用，新增
@max-sm等变体，可叠加使用，比如@sm @max-md - :has() 伪类支持上线，可写
.parent:has(.child) { ... }，但 Chrome - 3D 变换、P3 色域梯度、
inset-shadow等新实用类，都依赖浏览器对transform-style: preserve-3d或color-mix()的原生支持
最易被忽略的一点：v4 的“零配置”只对标准模板结构成立。一旦你用 fs.readFileSync 加载 HTML 片段、用 Webpack require.context 动态引入组件、或在字符串中拼接类名，Oxide 就无法提取这些类——不会警告，也不会生成对应 CSS，调试时只能靠肉眼比对产物文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
