Tailwind CSS v4 新特性速览

Tailwind CSS v4 有什么新变化？

Tailwind CSS v4 是一次重大升级，采用了全新的 Oxide 引擎，带来了显著的性能提升和更好的开发体验。

主要新特性

1. 全新引擎

v4 使用 Rust 重写了核心引擎，构建速度提升了 10 倍以上。对于大型项目来说，这意味着更快的开发服务器启动和热更新。

2. CSS-first 配置

不再需要 tailwind.config.js，所有配置直接在 CSS 中完成：

css
@import "tailwindcss";

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

3. 简化的暗黑模式

暗黑模式的使用更加直观：

html
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-gray-100">
    自动适应暗黑模式
  </p>
</div>

4. 容器查询

原生支持容器查询，无需额外插件：

html
<div class="@container">
  <div class="@lg:grid-cols-2 grid grid-cols-1">
    <!-- 响应容器宽度而非视口宽度 -->
  </div>
</div>

迁移建议

从 v3 迁移到 v4 需要注意：

1. 将 tailwind.config.js 配置迁移到 CSS @theme 指令
2. 更新 PostCSS 配置
3. 检查是否有不兼容的插件

结语

Tailwind CSS v4 是一个令人兴奋的版本，无论是性能还是开发体验都有很大的提升。如果你正在使用 v3，建议尽早规划迁移。