Tailwind 真的是慢吗？

Source: Dev.to

Tailwind 设法俘获了许多开发者的心，同时也成为了许多人最讨厌的 CSS 框架。人们出于各种原因爱它、恨它，但今天我想讨论的是 Tailwind CSS 的性能。一些持怀疑态度的开发者认为 Tailwind 可能会对加载和渲染时间产生负面影响。真的会吗？

本文将针对以下指控进行说明：

• “Tailwind 可能会降低渲染时间。” – 过多的原子 CSS 类可能导致额外的 CPU 负载。
• “Tailwind 可能会降低加载时间。” – 在惰性加载方面效率不高。
• “Tailwind 可能会影响网站缓存。”
  • 使用 Tailwind 生成的 HTML 文件通常更大。
  • 与 BEM 或 CSS Modules 相比，生成的 CSS 可能更频繁地重置缓存。

快速说明： 有些归咎于 Tailwind 的问题其实是原子化样式方法本身的问题。Tailwind 允许你创建组件（非原子化样式），但很多开发者仅仅把 Tailwind 用作原子化样式，这正是本文讨论的重点。

Tailwind 可能会降低渲染时间

为什么有些开发者会这么认为？

普遍的认识是，页面的 CSS 声明越多，浏览器处理的速度可能越慢。在原子化样式方法中，大多数声明只包含 1–3 条 CSS 规则，因此开发者往往会使用相对大量的类。

例如，要使用 Flexbox “居中一个 div”，你需要三个 Tailwind 类：

<!-- Example placeholder -->
<div class="flex items-center justify-center">
  …
</div>

每个类都会生成一个独立的样式声明。在非原子化方法（例如 CSS Modules 或 BEM）中，你可以把这些规则合并到一个选择器里。

基准测试

我搭建了一个基准测试来验证这一说法。

示例组件

// Tailwind component (class names differ per component)
<header className="flex gap-[0.0px]">
  {/* … */}
  <h2>Heading</h2>
</header>

// CSS Modules component (unique class name per component)
<header className={styles.header}>
  {/* … */}
  <h2>Heading 0</h2>
</header>

/* CSS Modules generated rules (repeat Tailwind styling) */
.egTxNhojHMGgAu4egvUQ { /* … */ }
.egTxNhojHMGgAu4egvUQ > header { /* … */ }

结果（仅解析/渲染，下载后）

更多的样式声明的确会增加渲染时间。

HTML 大小是否重要？

Tailwind 的类列表更长，导致 HTML 更大（≈ 1.1 MB 对比 0.4 MB）。为排除这个因素，我把 CSS Modules 的类名填充到与 Tailwind 相同的 HTML 大小：

<header className="flex gap-[0.0px]">
  …
</header>

即使 HTML 大小相同，CSS Modules 的文件也会膨胀到 2.7 MB（而 Tailwind 仍为 1.4 MB），但 Tailwind 仍然更快。类名的长度只会增加几毫秒，主要影响因素是 CSS 声明的数量。

要点

• 原子化方法本身不是问题，问题在于 大量唯一声明。
• 对常见模式使用 Tailwind 的实用类（例如 mt-1、mt-2、mt-4）。
• 除非必要，避免生成大量任意值（如 mt-[7px]、[&>header]:flex），因为它们会创建唯一选择器，导致样式表膨胀并影响性能。

📌 使用 Tailwind 及原子化方法可能会对渲染性能产生负面影响，但仅在你滥用它、创建大量唯一、任意类名时才会出现这种情况。

Tailwind 可能会降低加载时间

Tailwind 并不依赖惰性加载。如果一个页面是惰性加载的，而其样式使用 Tailwind 声明，所有这些样式都会被包含在最初加载的 CSS 文件中。因此，如果你有 100 个惰性加载的页面，所有 100 页的样式都会被打包进初始 CSS 负载，增加浏览器在渲染前必须下载的 CSS 量。

为缓解此问题，可考虑：

• 清除未使用的实用类（例如使用 Tailwind 的 purge/content 选项），只打包在初始视图中实际使用的类。
• 使用 webpack、Vite 或 Next.js 内置的 CSS 代码拆分等工具，将 CSS 按路由拆分为多个包。
• 使用组件抽取（@apply 或自定义组件）来减少唯一实用类的数量。

通过仔细配置 Tailwind 的构建流水线，你可以保持初始 CSS 负载小，避免不必要的加载开销。