范式转换：从 JavaScript 配置到 CSS 原生

Tailwind CSS v4 最引人注目的变化，是抛弃了延续多年的 JavaScript 配置文件（tailwind.config.js），转而拥抱纯 CSS 配置。这意味着你可以在 CSS 中直接定义颜色、间距、断点等设计 Token：

@theme {
  --color-brand: #c41e3a;
  --spacing-page: 2rem;
  --breakpoint-wide: 1200px;
}

这一变化不仅减少了配置文件的体积，更关键的是让设计 Token 与样式代码处于同一语境，降低了上下文切换成本。

性能飞跃

v4 引入了全新的引擎架构，构建速度相比 v3 提升了约 10 倍。核心优化包括：

• **增量编译**：只重新编译变动的部分，而非整个样式表
• **并行扫描**：利用多核 CPU 并行处理文件扫描
• **智能缓存**：基于文件内容的哈希缓存，避免重复计算

在大型项目中（500+ 组件），v4 的构建时间从 v3 的 8-12 秒缩短至 1-2 秒。

设计系统集成

v4 最大的突破在于，它不再只是一个"工具类集合"，而是一个真正的设计系统引擎。通过 @theme 指令，你可以将任何设计规范转化为可复用的 Token，并在全项目中统一引用。

这对于需要维护多个品牌主题的团队尤为重要——切换主题只需更换一组 CSS 变量，而无需修改任何组件代码。