index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html
![]()
本文对最新版本的 Tailwind CSS 和 UnoCSS 进行了性能测试，以比较它们的速度。测试基于去年相同的基准用例，并增加了包含 `@apply` 指令的场景，以模拟真实开发环境。测试结果显示，Tailwind CSS@Vite 版本在性能上全面超越 UnoCSS，尤其是在 Vite 集成模式下表现突出。文章分析了性能差异的原因，并从生态和灵活性角度为开发者提供了选择建议。
🚀 **Tailwind CSS@Vite 性能领先：** 在本次包含 `@apply` 指令的模拟真实开发场景测试中，Tailwind CSS@Vite 版本以平均 268ms 的构建时间成为最快的选项，全面超越了 UnoCSS。这得益于 Tailwind CSS@4 在 Rust 重写 Token 提取器以及内部对 AST 解析和构建的深度优化，特别是在 Vite 集成模式下，能够充分利用 Vite 的缓存和优化能力。
⚙️ **UnoCSS 的灵活性与性能权衡：** UnoCSS 以其高度的灵活性和可扩展性著称，但这种灵活性也带来了一定的性能开销。在测试中，UnoCSS/Vite 版本耗时 362ms，比 Tailwind CSS/Vite 慢约 1.37 倍。其 runtime 动态生成规则和插件抽象等特性在特定场景下可能会拖慢速度，尤其是在 PostCSS 模式下表现更甚。
📦 **生态与选择建议：** 从生态角度看，Tailwind CSS 已成为前端开发事实上的标准，拥有丰富的 UI 组件库、框架支持和海量学习资源，是需要稳定生态支持项目的首选。而 UnoCSS 则在自定义和灵活性方面表现出色，特别适合需要高度定制规则或偏好 Attributify 模式的开发者，但其生态支持和工具链成熟度相对逊色。
🔌 **PostCSS 模式开销显著：** 测试结果表明，无论是 Tailwind CSS 还是 UnoCSS，使用 PostCSS 模式的构建开销都远大于 Vite 集成模式。Tailwind CSS@PostCSS 版本比 Vite 版本慢近一倍，而 UnoCSS@PostCSS 版本更是表现最慢，接近 Tailwind CSS@4 Vite 版本的四倍，凸显了 Vite 带来的性能优势。
原创 icebreaker 2025-09-16 11:31 重庆
点击关注公众号，技术干货及时达！
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% 分位数（避免极端值干扰）。测试代码大家也可以自己跑跑 👉 源代码：https://github.com/sonofmagic/tailwindcss-vs-unocss/tree/main/bench
测试报告测试结果如下：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 快多少？，正好和去年的反过来了。为什么会这样？个人总结了一些原因：「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 模式」：ounter(lineounter(lineounter(lineounter(line
<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 它们之间相互卷起来，未来给我们开发者带来更多的惊喜！AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding
点击"阅读原文"了解详情~
阅读原文
跳转微信打开
