Tailwind CSS 4.0 Alpha 体验

Tailwind CSS 4.0 在 2024 年初发布 Alpha 版本，带来了一些重要变化。

基于 Rust 的性能提升

Tailwind 4 使用 Rust 重写了核心引擎，编译速度大幅提升。

# 安装
npm install tailwindcss@next

在我们的项目测试中：

项目规模	v3 编译	v4 编译	提升
小型 (50 组件)	0.8s	0.3s	62%
中型 (200 组件)	3.2s	0.9s	72%
大型 (500 组件)	12s	2.1s	82%

CSS-first 配置

Tailwind 4 放弃了 JavaScript 配置文件，改用 CSS 配置：

/* tailwind.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  
  --spacing-tight: 0.25rem;
  --spacing-normal: 0.5rem;
  --spacing-loose: 1rem;
}

@layer base {
  body {
    @apply text-gray-900 bg-white;
  }
}

这个变化让配置更直观，也方便在 CSS 中复用。

新的 @apply 语法

/* 之前 */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

/* Tailwind 4 */
.btn {
  @apply px-4 py-2;
  @apply bg-blue-500 text-white;
  @apply rounded;
  
  &:hover {
    @apply bg-blue-600;
  }
}

更支持嵌套语法，和原生 CSS 嵌套配合更好。

动态值

Tailwind 4 支持任意值：

<div class="mt-[23px] w-[calc(100%-2rem)]">
  <!-- 不需要配置，直接写 -->
</div>

<button class="text-[clamp(0.875rem,2vw,1.25rem)]">
  响应式字体大小
</button>

容器查询支持

<div class="@container">
  <div class="@lg:flex @lg:gap-4">
    <!-- 当容器宽度 >= 32rem 时，变为 flex 布局 -->
  </div>
</div>

不需要额外配置，开箱即用。

颜色函数

@theme {
  --color-brand: oklch(0.7 0.15 200);
}

/* 自动生成变体 */
.bg-brand { background-color: var(--color-brand); }
.bg-brand/50 { background-color: oklch(0.7 0.15 200 / 0.5); }
.text-brand { color: var(--color-brand); }

插件系统变化

/* 定义自定义组件 */
@layer components {
  .card {
    @apply rounded-lg shadow-md p-4;
    
    &-header {
      @apply font-semibold text-lg mb-2;
    }
    
    &-body {
      @apply text-gray-600;
    }
  }
}

/* 使用 */
<div class="card">
  <div class="card-header">标题</div>
  <div class="card-body">内容</div>
</div>

迁移工具

Tailwind 提供了自动迁移工具：

npx tailwindcss@next upgrade

会自动：

• 转换 tailwind.config.js 到 CSS
• 更新类名（如有变化）
• 调整 @apply 语法

兼容性

Tailwind 4 仍处于 Alpha 阶段，不建议用于生产环境。但可以提前尝试，反馈问题。

浏览器支持：

• Chrome 111+
• Firefox 128+
• Safari 16.4+

主要是容器查询和 oklch() 颜色的支持要求。

小结

Tailwind CSS 4 的主要变化：

• Rust 引擎，编译速度大幅提升
• CSS-first 配置，更直观
• 原生容器查询支持
• 动态值更灵活

等正式版发布，迁移成本应该不高。现在可以关注进展，在测试项目中尝鲜。