Tailwind CSS v4：全新引擎，全新体验

全新的 Oxide 引擎

Tailwind CSS v4 最大的变化在底层——全新的 Oxide 引擎，用 Rust 重写了核心编译逻辑。数字说明一切：

• 全量构建速度提升 10 倍
• 增量构建速度提升 100 倍
• 更低的内存占用

对于大型项目来说，这意味着从秒级等待缩短到几乎即时响应。

CSS-First 配置

v4 最显著的 API 变化是配置方式。告别 tailwind.config.js，拥抱纯 CSS 配置：

/* 以前：tailwind.config.js */

/* 现在：直接在 CSS 中 */ @import "tailwindcss";

@theme { --color-primary: #3b82f6; --font-display: "Satoshi", sans-serif; --breakpoint-3xl: 1920px; } ```

这不仅是语法糖——它意味着你的设计 token 直接以 CSS 自定义属性的形式存在，任何工具都能理解和使用。

原生级联层

v4 使用了 CSS 原生的 @layer 规则：

@layer theme, base, components, utilities;

这解决了长期以来的样式覆盖问题。你的自定义组件样式不再需要 !important 来与 utility 类竞争，级联层让优先级变得可预测。

容器查询

终于不用装插件了！v4 内置了容器查询支持：

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <!-- 根据容器宽度响应，而不是视口 -->
  </div>
</div>

这对组件化开发来说是巨大的进步——组件可以根据自身容器的大小来适配布局，真正实现了组件级别的响应式设计。

新的实用功能

3D 变换 ```html <div class="rotate-x-12 rotate-y-6 perspective-800"> <!-- 3D 效果，无需手写 transform --> </div> ```

渐变增强 ```html <div class="bg-linear-to-r from-blue-500 to-purple-500 via-30%"> <!-- 精确控制渐变停止点 --> </div> ```

字段大小调整 ```html <textarea class="field-sizing-content"> <!-- 自动根据内容调整高度 --> </textarea> ```

迁移路径

从 v3 迁移并不痛苦。官方提供了自动化迁移工具：

npx @tailwindcss/upgrade

它会自动处理： 1. 将 tailwind.config.js 转换为 CSS @theme 配置 2. 更新已废弃的 class 名称 3. 调整 PostCSS 配置

总结

Tailwind CSS v4 不只是版本号的升级，它是对整个工具链的重新思考。Oxide 引擎带来了质的性能飞跃，CSS-first 配置让工具链更简洁，而容器查询和 3D 变换等新功能则拓展了可能性的边界。

如果你还在用 v3，现在是升级的好时机。