Tailwind CSS v4 新特性详解

Tailwind CSS v4 是一次重大更新，带来了全新的引擎架构和许多令人兴奋的新特性。本文将带你深入了解这些变化。

全新的引擎架构

Tailwind CSS v4 采用了全新的 Oxide 引擎，使用 Rust 编写，带来了显著的性能提升。

性能对比

| 指标 | v3 | v4 |

|------|----|----|

| 全量构建 | 300ms | 50ms |

| 增量构建 | 100ms | 5ms |

| 内存占用 | 高 | 低 |

CSS 原生配置

v4 最大的变化之一是配置方式的改变。现在可以直接在 CSS 文件中进行配置：

@import "tailwindcss";

@theme {

--color-primary: #3b82f6;

--color-secondary: #10b981;

--font-display: "Inter", sans-serif;

}

告别 tailwind.config.js

不再需要 JavaScript 配置文件，所有配置都可以在 CSS 中完成：

@theme {

/* 自定义颜色 */

--color-brand: oklch(0.7 0.15 200);

/* 自定义间距 */

--spacing-18: 4.5rem;

/* 自定义断点 */

--breakpoint-3xl: 1920px;

}

原生 CSS 变量支持

v4 全面拥抱 CSS 变量，所有的设计令牌都会自动生成对应的 CSS 变量：

/* 自动生成 */

:root {

--color-blue-500: #3b82f6;

--spacing-4: 1rem;

--font-size-lg: 1.125rem;

}

在自定义 CSS 中使用

.custom-button {

background-color: var(--color-primary);

padding: var(--spacing-4) var(--spacing-6);

font-size: var(--font-size-lg);

}

新的实用类

容器查询

<div class="@container">

<div class="@lg:flex @lg:gap-4">

<!-- 根据容器宽度响应 -->

</div>

</div>

3D 变换

<div class="rotate-x-45 rotate-y-30 perspective-500">

3D 变换效果

</div>

渐变增强

<div class="bg-linear-to-r from-blue-500 via-purple-500 to-pink-500">

更强大的渐变支持

</div>

简化的安装

v4 的安装变得更加简单：

npm install tailwindcss@next @tailwindcss/postcss@next

PostCSS 配置：

export default {

plugins: {

"@tailwindcss/postcss": {},

},

};

迁移指南

从 v3 迁移到 v4 需要注意以下几点：

1. **移除 tailwind.config.js**：将配置迁移到 CSS 文件
2. **更新导入方式**：使用 `@import "tailwindcss"` 替代三个指令
3. **检查废弃的类名**：部分类名有所变化
4. **更新构建工具配置**：使用新的 PostCSS 插件

总结

Tailwind CSS v4 是一次革命性的更新，它不仅带来了显著的性能提升，还简化了配置方式，让开发体验更加流畅。如果你正在使用 Tailwind CSS，强烈建议关注 v4 的发展并在合适的时机进行升级。