tailwindcss 究竟比 unocss 快多少？

tailwindcss 究竟比 unocss 快多少？

前言

大家好，我是去年一篇测评 《unocss 究竟比 tailwindcss 快多少？》 的作者 icebreaker。

一晃到了 2025 年，tailwindcss@4 也正式发布了，现在最新版本是 4.1.13。

新版本不仅在功能和性能上大升级，甚至定位也发生了变化: 从一个 PostCSS 插件变成了样式预处理器。

与此同时，unocss 也一直在进步，一路也更新到了 66.5.1，新的 preset-wind4 写法上也对 tailwindcss@4 做了一定的兼容。

但有一点还是不一样：它还没办法像 tailwindcss@4 一样，把所有配置都直接写在 css 里。

开始测试

这次测试，我还是沿用了去年的基准用例，不过加了更多场景。

比如，我在里面加入了等量的 @apply 指令，来模拟真实开发时的情况。这样一来，不管是 tailwindcss 还是 unocss，都得老老实实去解析 CSS AST，算是“加点负重”。

测试环境保持一致，依旧还是我的老伙计 MacBook M1 Pro (2021)（想换新的 M4 Pro了）

跑 200 次，提取并生成 1656 个工具类，取 75% 分位数（避免极端值干扰）。

测试代码大家也可以自己跑跑 👉 源代码。

测试报告

测试结果如下：

2025/9/10 16:41:50
1656 utilities | x200 runs (75% build time)none                                         14.03 ms / delta.      0.00 ms
@tailwindcss/vite        v4.1.13            114.44 ms / delta.    100.41 ms (x1.00)
@tailwindcss/postcss     v4.1.13            229.34 ms / delta.    215.31 ms (x2.14)
unocss/vite              v66.5.1            330.98 ms / delta.    316.95 ms (x3.16)
tailwindcss3             v3.4.17            710.17 ms / delta.    696.14 ms (x6.93)
@unocss/postcss          v66.5.1            864.50 ms / delta.    850.47 ms (x8.47)

分析结果

从数据里可以很直观地看出几个结论：

• 最快的是 tailwindcss@vite，平均 114ms。
• 最慢的是 @unocss/postcss，接近 864ms。
• @tailwindcss/vite vs unocss/vite：
  • unocss/vite（330ms）对比 tailwindcss@vite（114ms），大概 慢 3 倍。
• postcss 模式的开销真的很大：
  • tailwindcss@postcss 比 vite 版本慢一倍（229ms）。
  • @unocss/postcss 更是接近 vite 版 tailwindcss@4 的 7.5 倍。
• 老的 tailwindcss@3（710ms）基本没法和新版本比，性能差距太明显。

因为这个结果，所以这篇文章起了这个标题 tailwindcss 究竟比 unocss 快多少？，正好和去年的反过来了。

为什么会这样？

个人总结了一些原因：

1. tailwindcss@4 的技术升级

   • 它的 Token 提取器用 Rust 重写，效率高很多。(可能这点加了大分)
   • 定位从 PostCSS 插件转为“预处理器”，内部对 AST 解析和构建做了深度优化。
   • 在 Vite 集成模式下，性能直接拉满。

2. unocss 的灵活性代价

   • unocss 胜在灵活和可扩展，但灵活带来额外性能开销。
   • 特别是 runtime 动态生成规则、插件抽象这些地方，都会拖慢速度。
   • 在 PostCSS 模式下表现更差。

3. vite 的加成

   • vite 本身 HMR 和插件体系就很快。
   • tailwindcss@vite 能直接吃到 vite 的缓存和优化红利。

我们应该选用哪个方案?

从生态的角度考虑

从生态上来说，tailwindcss 基本上是“既成事实的标准”。

无论是前端社区里大大小小的 UI 组件库，还是各种脚手架、模版项目，AI 生成的代码，大多数都优先支持 tailwindcss。

比如：

• UI 组件库：像 shadcn/ui、daisyUI、flowbite 等，几乎全是基于 tailwindcss 打造。
• 框架模版：Next.js、Nuxt、Remix、Astro 的官方或社区 starter 里，大多数开箱即配好 tailwindcss。
• 文档和教程：tailwindcss 的学习资料、视频课程、最佳实践文章，数量远超 unocss。

换句话说，如果你用 tailwindcss，几乎可以无缝接入整个生态，不用自己花太多心思去适配。

所以，如果你项目需要稳定的生态支持、丰富的组件库，首选 tailwindcss 基本没悬念。

从自定义和灵活性的角度考虑

但如果你追求的是极致的灵活性，那 unocss 依旧是很强的选项。

unocss 的特点是：

1. 规则引擎化：你可以像写正则一样，自定义规则来生成工具类。
2. 预设体系：除了官方的 @unocss/preset-uno，还能叠加 attributify、icons、typography 等预设，甚至自己写预设。
3. 任意属性模式：不仅仅是类名，甚至可以用类似 text="red-500" 这样的写法。

这类灵活性，在 tailwindcss 里要么需要写 plugin，要么使用内联样式。而在 unocss 里就是一条正则规则的事情。

而且 unocss 能够使用 Attributify 模式：

<!-- unocss 支持直接在属性里写 -->
<div flex="~ col" text="center gray-700" m="y-4"><p>Hello World</p>
</div>

这种写法比 tailwindcss 的“长串 class”要简洁很多，特别适合喜欢 HTML 语义化的人。

不过 unocss 的灵活性，导致 unocss-merge 相对难产, https://www.npmjs.com/package/unocss-merge 这个包没人用，个位数下载量。

不像 tailwind-merge 已经成为各个 tailwindcss 组件库的标配了。(Weekly Downloads 将近1千200万次)

所以结论是：

• tailwindcss = 生态第一，几乎是“官方标配”。
• unocss = 灵活度第一，适合“想自己捏规则”的场景。

结语

今天的数据用一句话总结：

• tailwindcss 的性能全面超越 unocss

所以，如果你追求开发体验 + 构建速度，那现在毫无疑问是 tailwindcss@4 + vite 最优解。

最后，也再期待一波 unocss 的大更新，再和 tailwindcss 它们之间相互卷起来，未来给我们开发者带来更多的惊喜！