unocss 究竟比 tailwindcss 快多少？
内容提要
unocss 是一种高效的原子化 CSS 引擎，其速度比 tailwindcss 快约 2.52 倍。它通过正则表达式直接从内容中提取 token，避免了解析 CSS 抽象语法树。尽管使用 @apply 等指令时性能差距缩小，但 unocss 仍然表现出色。期待未来 unocss 和 tailwindcss 之间的竞争带来更多惊喜。
延伸解读
速度优势的来源
unocss 比 tailwindcss 快，核心在于它不解析 CSS 抽象语法树，而是用正则表达式从内容中直接提取 token 并生成样式。官方测试显示，在纯工具类提取场景下，unocss 比 tailwindcss 快约 3.7 倍。这种设计避免了 AST 解析的开销，是速度差距的主要来源。
使用 @apply 后的性能变化
当 unocss 以 vite/webpack 插件方式使用并需要支持 @apply 等指令时，必须引入 @unocss/transformer-directives，该包依赖 css-tree 解析 CSS AST。作者测试表明，在加入等量 @apply 后，unocss 的速度优势从 3.7 倍缩小到约 2.52 倍。这说明解析 AST 会显著拖慢 unocss，但即便如此，它仍比 tailwindcss 快。
PostCSS 插件下的性能对比
如果改用 @unocss/postcss 插件，unocss 和 tailwindcss 都需要解析 CSS AST，性能差距变得非常小。作者测试中，unocss 仅比 tailwindcss 快约 1.05 倍，相差仅 30ms 左右。这 30ms 主要取决于双方正则表达式的数量和质量。此时 unocss 更像一个可自定义的 tailwindcss 版本，但失去了其部分速度灵魂。
最佳实践与未来展望
测试表明，unocss 的最佳实践是尽可能减少 CSS AST 的解析，这样其提取 token 的速度会远快于 tailwindcss。同时，tailwindcss 即将发布的 v4 版本据称用 Rust 实现，可能带来性能提升。两者竞争对开发者有利，未来值得期待。
Q&A
unocss 和 tailwindcss 的速度差距是多少？
unocss 的速度比 tailwindcss 快约 2.52 倍。
unocss 是如何提高性能的？
unocss 通过正则表达式直接从内容中提取 token，避免了解析 CSS 抽象语法树。
使用 @apply 指令时，unocss 的速度表现如何？
使用 @apply 指令时，unocss 的速度优势缩小至 2.52 倍。
unocss 和 tailwindcss 可以通过什么方式扩展功能？
unocss 和 tailwindcss 都可以通过插件和预设添加更多匹配规则。
unocss 的最佳实践是什么？
最佳实践是尽量减少 CSS AST 的解析，以提高 unocss 的提取速度。
未来 unocss 和 tailwindcss 的竞争会带来什么？
期待 unocss 和 tailwindcss 之间的竞争带来更多惊喜。
