Tailwind CSS 4.0 新特性：原子化 CSS 再进化

Tailwind CSS 4.0 正式发布，带来了性能提升和新特性，让原子化 CSS 开发体验更加出色。

4.0 主要变化

1. 原生 Prompts API

Tailwind CSS 4.0 可以直接用自然语言描述样式：

// 不需要记住具体类名
<div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-8 shadow-xl hover:scale-105 transition-transform">

// Tailwind AI 可以理解你的意图
<div className="magic-button">
  {/* AI 会生成合适的样式 */}
</div>

2. 性能大幅提升

4.0 使用 LightningCSS 重写了核心构建流程：

• 构建速度提升 10 倍
• 增量编译支持
• 更小的输出文件

3. 新的布局原语

// 新的瀑布流布局
<div className="columns-3 gap-4">
  {items.map(item => <img src={item.src} />)}
</div>

// 容器查询
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

实用技巧

1. 动态值支持

// 支持任意值
<div className="p-[calc(100%-2rem)]">
<div className="text-[#1da1f2]">
<div className="translate-[var(--x),var(--y)]">

2. 进阶深色模式

// 现在支持任意选择器策略
<div className="dark:[&.special]:bg-gray-900">

// 组合使用
<button className="dark:hover:bg-gray-800 data-[state=open]:rotate-180">

3. 状态变体

// 支持任意 HTML 属性
<details className="group">
  <summary className="data-[open]:bg-gray-100">
    Click me
  </summary>
</details>

与 CSS Modules 对比

迁移到 4.0

# 安装 4.0
npm install tailwindcss@4.0

# 配置文件改为 CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

# 或使用新语法
@import "tailwindcss";

总结

Tailwind CSS 4.0 大幅提升了开发体验和性能，是 2024 年值得升级的技术。