TailwindCSS v4 有什么新变化？从 v3 迁移指南

TailwindCSS v4 是一次底层重写——从 PostCSS 插件变成了 Rust 编写的独立引擎，构建速度提升 10 倍。配置方式也从 tailwind.config.js 变成了 CSS 原生配置。API 变化不大，但工具链完全不同。

最大的变化：Oxide 引擎

v3 用 PostCSS + Node.js 处理 CSS，大项目构建可能要 500ms+。v4 用 Rust 写的 Oxide 引擎，同样的项目降到 5ms。实际感受：v3 修改一个 class 要等几百毫秒才看到变化，v4 几乎即时。

配置方式变了

v3 用 JavaScript 配置文件，v4 用 CSS 原生配置：

css
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-sans: "Inter", sans-serif;
}

不再需要 tailwind.config.js。所有自定义都写在 CSS 的 @theme 块里。这个变化是 v4 迁移的主要工作量。

自动内容检测

v3 需要在配置里指定 content 路径。v4 自动检测项目中的模板文件，不需要配置。

新的 CSS 特性支持

v4 原生支持更多现代 CSS 特性：

• 容器查询：@container 变体开箱即用
• 3D 变换：rotate-x、rotate-y、translate-z 等
• color-mix：动态混色

html
<div class="@container">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3">...</div>
</div>

迁移步骤

1. 升级依赖：npm install tailwindcss@4 @tailwindcss/vite
2. 把 tailwind.config.js 的自定义迁移到 @theme 块
3. 删除 content 配置（自动检测）
4. 把 @tailwind 指令改成 @import "tailwindcss"
5. 运行 npx @tailwindcss/upgrade 自动迁移大部分代码

v4 的不足

• 插件生态还在迁移中，很多 v3 插件不兼容
• 文档还在完善
• 某些 @apply 嵌套行为不同

新项目直接用 v4。现有项目不急迁移——v3 仍在维护。