tailwindcss 究竟比 unocss 快多少？

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/11 10:01:53
1656 utilities | x200 runs (75% build time)

none                                         14.42 ms / delta.      0.00 ms
@tailwindcss/vite        v4.1.13            268.90 ms / delta.    254.48 ms (x1.00)
unocss/vite              v66.5.1            362.08 ms / delta.    347.66 ms (x1.37)
@tailwindcss/postcss     v4.1.13            438.63 ms / delta.    424.21 ms (x1.67)
tailwindcss3             v3.4.17            739.27 ms / delta.    724.85 ms (x2.85)
@unocss/postcss          v66.5.1            912.33 ms / delta.    897.91 ms (x3.53)

分析结果

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

• **最快的是 tailwindcss@vite**，平均 268ms。
• **最慢的是 @unocss/postcss**，接近 912ms。
• **@tailwindcss/vite vs unocss/vite**：
  • unocss/vite（362ms）对比 tailwindcss@vite（268ms），大概 慢 1.37 倍。
• postcss 模式的开销真的很大：
  • tailwindcss@postcss 比 vite 版本慢将近一倍（438ms）。
  • @unocss/postcss 更是接近 vite 版 tailwindcss@4 的 4 倍。
• 老的 tailwindcss@3（739ms）基本没法和新版本比，性能差距太明显。

因为这个结果，所以这篇文章起了这个标题 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 支持直接在属性里写 -->
<divflex="~ col"text="center gray-700"m="y-4">
  <p>Hello World</p>
</div>

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

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

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

所以结论是：

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

结语

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

• tailwindcss 的性能全面超越 unocss

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

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

来源 Vue 社区，作者：icebreaker

以上关于tailwindcss 究竟比 unocss 快多少？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。