Tailwind CSS 4 alpha 抢先看：CSS-first 配置

一句话结论：Tailwind 4 把配置从 JS 移到 CSS，引擎换成 Lightning CSS。构建速度提升 10 倍。

5 个重大变化

1. CSS-first 配置

/* ❌ Tailwind 3：tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#7c3aed',
      },
    },
  },
};

/* ✅ Tailwind 4：直接在 CSS 里 */
@import "tailwindcss";

@theme {
  --color-brand: #7c3aed;
}

优势：

• 不用切换 JS / CSS 上下文
• CSS 变量自动可用
• IDE 高亮更好

2. Lightning CSS 引擎

# 构建时间对比（100 个组件项目）

Tailwind 3 (PostCSS): 12.5s
Tailwind 4 (Lightning CSS): 1.4s

优势：

• 用 Rust 写的 CSS 解析器
• 比 PostCSS 快 10 倍
• 支持现代 CSS 语法（嵌套、color-mix）

3. 自动内容检测

// ❌ Tailwind 3：必须配置 content
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
};

// ✅ Tailwind 4：自动检测所有源文件
// 无需配置！

4. CSS 变量主题

@theme {
  --color-primary: #7c3aed;
  --color-secondary: #ec4899;
  --font-display: "Inter", sans-serif;
  --spacing-1: 4px;
  --spacing-2: 8px;
}

/* 自动生成：bg-primary, text-secondary, font-display */

5. 容器查询内置

<!-- ❌ Tailwind 3：需插件 -->
<!-- @tailwindcss/container-queries -->

<!-- ✅ Tailwind 4：内置 -->
<div class="@md:flex-row flex-col">
  ...
</div>

安装（alpha）

npm install tailwindcss@next

postcss.config.mjs：

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

globals.css：

@import "tailwindcss";

@theme {
  --color-brand-50: #f5f3ff;
  --color-brand-500: #8b5cf6;
  --color-brand-900: #4c1d95;
}

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
}

迁移指南

Step 1：升级依赖

npm install tailwindcss@next @tailwindcss/postcss@next
npm uninstall tailwindcss postcss autoprefixer

Step 2：删除配置

# 删除 tailwind.config.js（v4 不再需要）

Step 3：迁移 globals.css

/* v3 风格（删除） */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* v4 风格（新增） */
@import "tailwindcss";

Step 4：迁移自定义颜色

// ❌ v3: tailwind.config.js
extend: {
  colors: {
    brand: {
      500: '#8b5cf6',
    },
  },
}

// ✅ v4: globals.css
@theme {
  --color-brand-500: #8b5cf6;
}

Step 5：测试

npm run dev
npm run build

5 个常见坑

坑 1：alpha 阶段有 bug

生产环境暂不推荐用 alpha
等 2026 Q3 stable 再升级

坑 2：插件不兼容

# 老插件可能不工作
# 检查：https://tailwindcss.com/docs/installation

坑 3：暗色模式配置变化

/* ❌ v3：darkMode: 'class' 在 config */

/* ✅ v4：用 @custom-variant */
@custom-variant dark (&:where(.dark, .dark *));

坑 4：自定义动画

/* ❌ v3：@layer utilities */

/* ✅ v4：@theme + @keyframes */
@theme {
  --animate-fade-in: fadeIn 0.3s ease-in;
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

坑 5：JIT 模式默认开启

// 不再需要 purge 配置
// 自动 tree-shake 未使用的类

何时升级

现在升级（alpha）

• 新项目（无历史包袱）
• 喜欢尝试新特性
• 想体验 10x 构建速度

等 stable 再升级

• 现有大型项目
• 依赖大量第三方插件
• 团队不愿冒险

不升级

• 项目已用 Tailwind 3 稳定运行
• 没有性能瓶颈

我的看法

Tailwind 4 是 5 年来最重要的升级：

1. CSS-first 配置 → 更符合 CSS 工作流
2. Lightning CSS → 构建快 10 倍
3. 零配置 → 上手成本更低
4. 现代 CSS 特性 → 跟上前沿

但 alpha 阶段不稳定，建议新项目试用，老项目等 stable。

参考

• Tailwind 4 alpha 文档
• Lightning CSS
• 迁移指南

---

本文基于 Tailwind 4 alpha.2，2026 年 5 月最新。