Tailwind CSS v4 迁移指南

最大的变化

Tailwind CSS v4 最显著的变化是配置方式的彻底改变。不再需要 tailwind.config.ts，所有配置都在 CSS 文件中完成。

新的配置方式

v4 使用 @theme 指令替代了之前的 JavaScript 配置文件：

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-sans: "Inter", sans-serif;
}

这种方式的好处是配置更加直观，CSS 变量可以直接在浏览器中调试。

迁移步骤

1. 移除 tailwind.config.ts
2. 更新 postcss.config.mjs 使用 @tailwindcss/postcss
3. 将主题配置迁移到 CSS 文件的 @theme 块中
4. 检查自定义插件是否兼容

迁移过程比想象中顺利，大部分工具类的用法保持不变。

性能提升

v4 在构建速度上有了明显提升，得益于底层引擎的重写。在我们的项目中，构建时间减少了约 40%。