Tailwind CSS v4 有什么变化

核心变化

Tailwind v4 于 2025 年 1 月正式发布，相比 v3 有几个重要变化。

配置方式：从 JS 到 CSS

v3 的配置放在 tailwind.config.js，v4 直接在 CSS 里用 @theme 配置：

/* v4 写法 */
@import "tailwindcss";
 
@theme {
  --color-primary: #6366f1;
  --font-sans: "Inter", sans-serif;
  --spacing-18: 4.5rem;
}

不再需要 tailwind.config.js 文件。

插件引用方式

v3 里 require 插件，v4 改用 @plugin：

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

不再需要 PostCSS 配置（大多数情况）

Vite 和 Next.js 已内置支持，你只需要 @import "tailwindcss" 即可。

性能提升

• 全量构建速度提升 3.5x
• 增量构建速度提升 8x
• 内部重写为 Rust + Lightning CSS

迁移要点

如果你从 v3 升级，主要需要注意：

1. tailwind.config.js 里的 theme.extend 改写为 @theme inline { ... }
2. 插件的 require 改为 @plugin
3. 部分工具类重命名（官方提供了迁移工具 npx @tailwindcss/upgrade）

新特性：原生容器查询

v4 内置了容器查询支持，不再需要额外插件：

<div class="@container">
  <div class="@sm:grid-cols-2 grid grid-cols-1">
    <!-- 根据父容器宽度响应，而非视口 -->
  </div>
</div>

这对组件库开发非常有用。

总结

v4 的改动幅度较大，但方向是对的——更简洁的配置、更好的性能、更贴近现代 CSS。对于新项目，建议直接上 v4。