Tailwindcss 4 已经正式发布，当前最新版本是 4.1.13。这个新版本不仅增加了新功能，还提升了性能，而且定位也发生了变化：从一个 PostCSS 插件变成了“样式预处理器”。

与此同时，UnoCSS 也在持续更新，现在已经到了 66.5.1 版本。新的 preset-wind4 在写法上也对 TailwindCSS 4 做了一些兼容。不过它们之间还是有一个重要区别：UnoCSS 还不能像 TailwindCSS 4 那样，把所有配置都直接写在 CSS 文件里。

性能测试设置

为了比较它们的性能，我使用了去年的基准测试用例，但增加了一些新场景。我在测试中加入了等量的 @apply 指令，这样能更好地模拟真实开发场景。这个改动让两个框架都需要解析 CSS 抽象语法树，增加了测试的难度。

测试环境没有变化，还是使用那台 MacBook M1 Pro（2021 款）。我每次运行生成 1656 个工具类，重复 200 次，然后取 75% 分位数的结果，这样可以避免极端值的影响。

如果你想要验证测试结果，可以查看测试代码仓库。

测试结果

以下是具体的测试数据（数值越低表示性能越好）：

• 无操作（基准测试）：14.42 毫秒

• @tailwindcss/vite (v4.1.13)：268.90 毫秒

• unocss/vite (v66.5.1)：362.08 毫秒

• @tailwindcss/postcss (v4.1.13)：438.63 毫秒

• tailwindcss3 (v3.4.17)：739.27 毫秒

• @unocss/postcss (v66.5.1)：912.33 毫秒

结果分析

从这些数据中可以得出几个结论：

TailwindCSS 的 Vite 版本是最快的，平均只需要 268 毫秒
UnoCSS 的 PostCSS 版本是最慢的，接近 912 毫秒
比较 Vite 版本：UnoCSS 比 TailwindCSS 慢大约 1.37 倍
PostCSS 模式的开销很大：TailwindCSS 的 PostCSS 版本比 Vite 版本慢将近一倍
老版本的 TailwindCSS 3 性能明显不如新版本

为什么会有这样的差异？

TailwindCSS 4 有几个技术优势。它的 Token 提取器用 Rust 重写了，效率更高。从 PostCSS 插件转变为预处理器后，内部对代码解析和构建过程做了深度优化。在 Vite 环境中，它能充分利用各种性能优化。

UnoCSS 的优势在于灵活性和可扩展性，但这种灵活性需要付出性能代价。特别是在运行时动态生成规则、插件系统这些地方，都会影响速度。在 PostCSS 模式下，性能下降更加明显。

Vite 工具本身也对结果有影响。Vite 的热更新和插件系统本身就很快，TailwindCSS 的 Vite 版本能直接受益于 Vite 的缓存和优化机制。

如何选择适合的方案？

从生态系统来看，TailwindCSS 已经成为事实上的标准。无论是前端社区的 UI 组件库，还是各种脚手架和模板项目，大多数都优先支持 TailwindCSS。

比如，shadcn/ui、daisyUI、flowbite 这些流行的 UI 组件库都是基于 TailwindCSS 构建的。Next.js、Nuxt、Remix、Astro 等框架的官方或社区模板，通常都默认配置了 TailwindCSS。相关的学习资料、视频课程和最佳实践文章，TailwindCSS 也远远多于 UnoCSS。

如果你需要稳定的生态支持、丰富的组件库，选择 TailwindCSS 是比较稳妥的。

但从自定义和灵活性角度来看，UnoCSS 仍然很有优势。UnoCSS 允许你像写正则表达式一样自定义规则来生成工具类。它有一套预设系统，除了官方的 @unocss/preset-uno，还可以使用 attributify、icons、typography 等预设，甚至可以自己编写预设。

UnoCSS 支持属性化模式，可以直接在 html 属性中写样式：

<div flex="~ col" text="center gray-700" m="y-4">
  <p>Hello World</p>
</div>

这种写法比 TailwindCSS 的长类名字符串更简洁，适合注重 HTML 语义化的开发者。

不过 UnoCSS 的灵活性也带来了一些问题。比如，unocss-merge 这个包发展缓慢，每周下载量只有个位数。而 tailwind-merge 已经成为各个 TailwindCSS 组件库的标准配置，每周下载量接近 1200 万次。

总结

简单来说，测试结果显示 TailwindCSS 在性能上全面超越了 UnoCSS。

如果你优先考虑开发体验和构建速度，那么 TailwindCSS 4 加上 Vite 是目前最好的选择。如果你需要极高的灵活性，愿意为了自定义功能牺牲一些性能，那么 UnoCSS 仍然值得考虑。

对于大多数项目，特别是需要快速开发和丰富生态支持的情况，我会推荐使用 TailwindCSS。对于那些有特殊需求，需要高度自定义样式的项目，UnoCSS 可能更适合。

无论选择哪个，都要根据项目的具体需求、团队的技术背景和未来的维护计划来综合考虑。两个框架都在持续更新，未来的版本可能会改变现在的性能对比结果。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12984