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%分位数（避免极端值干扰）。 测试代码大家也可以自己跑跑 ?? 源代码： https://github.com/sonofmagic/tailwindcss-vs-unocss/tree/main/bench 测试报告测试结果如下： 2025/9/1110:01:531656utilities|x200 runs (75%build time) none 14.42ms/delta. 0.00ms@tailwindcss/vite v4.1.13 268.90 ms /delta. 254.48ms (x1.00)unocss/vite v66.5.1 362.08 ms /delta. 347.66ms (x1.37)@tailwindcss/postcss v4.1.13 438.63 ms /delta. 424.21ms (x1.67)tailwindcss3 v3.4.17 739.27ms/delta. 724.85ms (x2.85)@unocss/postcss v66.5.1 912.33 ms /delta. 897.91ms (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 模式」： ounter(lineounter(lineounter(lineounter(line!-- unocss 支持直接在属性里写 --divflex="~ col"text="center gray-700"m="y-4"pHello 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 点击"阅读原文"了解详情~ 阅读原文