Tailwind CSS v4 最佳实践与性能提升
Tailwind CSS v4 于 2025 年 1 月 22 日正式发布，这是一次从零开始的完全重写，带来了革命性的性能提升和全新的配置体验。
核心变化
Oxide 引擎：性能飞跃
v4 的内部引擎替换为 Rust 编写的 Lightning CSS：
| 指标 | v3 | v4 | 改善 |
|---|---|---|---|
| 完整构建 | 基准 | - | 3.5 倍更快 |
| 增量构建 | 基准 | - | 8 倍更快 |
| 无 CSS 变化时 | 基准 | - | 100 倍以上（微秒级） |
| 内存使用 | 基准 | - | 减少 45% |
CSS-first 配置
v3 的 tailwind.config.js 被 CSS 配置取代：
/* v4: app.css */
@import "tailwindcss";
@theme {
--color-brand: #3b82f6;
--color-accent: #f59e0b;
--font-sans: "Inter", sans-serif;
}
所有 @theme 中定义的值自动成为 CSS 自定义属性，可在任何地方通过 var(--color-brand) 引用。
自动内容检测
v4 自动发现模板文件，无需配置 content 数组：
/* 一行代码即可启用 */
@import "tailwindcss";
新增功能
容器查询（原生支持）
v3 需要 @tailwindcss/container-queries 插件，v4 原生支持：
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4">
<!-- 根据容器宽度响应式布局 -->
</div>
</div>
P3 广色域调色板
v4 重新设计了颜色系统，充分利用现代显示器的广色域能力，色彩更加鲜艳生动。
3D 变换工具类
直接在 HTML 中使用 3D 变换：
<div class="rotate-x-12 rotate-y-45 perspective-1000">
3D 变换元素
</div>
@starting-style 支持
无需 JavaScript 即可创建进入/退出动画：
@starting-style {
.fade-in {
opacity: 0;
}
}
迁移建议
- 使用官方自动升级工具：
npx @tailwindcss/upgrade - 将
tailwind.config.js中的主题配置迁移到 CSS@theme - 移除
@tailwind base指令（v4 不再需要） - 注意：v4 不再支持 IE11