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/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/vitevsunocss/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 快多少？，正好和去年的反过来了。
为什么会这样？
个人总结了一些原因：
-
tailwindcss@4 的技术升级
- 它的
Token提取器用Rust重写，效率高很多。(可能这点加了大分) - 定位从
PostCSS插件转为“预处理器”，内部对AST解析和构建做了深度优化。 - 在
Vite集成模式下，性能直接拉满。
- 它的
-
unocss 的灵活性代价
unocss胜在灵活和可扩展，但灵活带来额外性能开销。- 特别是 runtime 动态生成规则、插件抽象这些地方，都会拖慢速度。
- 在
PostCSS模式下表现更差。
-
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 的特点是：
- 规则引擎化：你可以像写正则一样，自定义规则来生成工具类。
- 预设体系：除了官方的
@unocss/preset-uno，还能叠加attributify、icons、typography等预设，甚至自己写预设。 - 任意属性模式：不仅仅是类名，甚至可以用类似
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 它们之间相互卷起来，未来给我们开发者带来更多的惊喜！
