Tailwind CSS v4 深度体验：CSS-First 配置与性能革命

为什么 Tailwind v4 是一次革命？

Tailwind CSS v4 不是简单的版本迭代，而是从底层重写了整个引擎。新的 Oxide 引擎基于 Rust 构建，全量构建速度提升约 5 倍，增量构建提升约 100 倍。

CSS-First 配置

v4 最大的变化是配置方式。告别 tailwind.config.js，现在直接在 CSS 文件中通过 @theme 指令定义设计 token：

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.6 0.2 240);
  --font-display: "Inter", sans-serif;
  --radius-card: 1rem;
}

新增的实用工具类

v4 新增了大量实用工具类，包括 field-sizing-content、text-wrap-balance、starting-style 等，这些都是现代 CSS 特性的直接映射。

迁移建议

官方提供了自动迁移工具 npx @tailwindcss/upgrade，可以自动处理大部分配置迁移工作。建议在迁移前先备份项目，并在测试环境验证。