UnoCSS 比 Tailwind CSS 快 2.5–5.2 倍,具体取决于是否启用 @apply 等指令、构建工具链及内容扫描范围;纯原子类提取时差距最大,启用 transformer 后收窄但仍显著。

UnoCSS 比 Tailwind CSS 快 2.5–5.2 倍,具体差多少取决于你是否启用 @apply、@screen 等 CSS 指令,以及构建工具链和内容扫描范围。纯原子类提取场景下差距最大,加了 transformer 后差距收窄但依然显著。
看官方基准测试的 raw 数值,别信倍数宣传
官方 bench 脚本(bench/run.mjs)在统一环境(MacBook M1,200 次构建取 75% 时间)下跑出过这些真实数据:
-
unocss v0.58.5(仅@unocss/preset-uno+@unocss/transformer-directives):328.39 ms -
tailwindcss v3.4.1(默认配置 + 同等@apply量):798.42 ms -
none(无 CSS 框架基线):19.92 ms
注意:这个 2.52× 差距是“带负重”的结果——双方都用了 @apply,意味着 UnoCSS 也触发了 css-tree AST 解析。如果你项目里根本不用 @apply,UnoCSS 会直接跳过 AST 阶段,差距可能拉到 4–5×。
为什么实测速度差异浮动这么大
关键不在“引擎快不快”,而在“它什么时候开始干活”:
立即学习“前端免费学习笔记(深入)”;
- Tailwind 的 JIT 是静态扫描:读完整个
contentglob 下所有文件,逐行正则匹配疑似类名,再查表生成规则。文件多、含大量 MDX 或注释时,I/O 和匹配开销明显上升 - UnoCSS 默认走 extractor 提取:开发时靠 Vite 插件拦截单个
.vue或.tsx文件,在内存里对模板字符串做轻量正则提取,不碰 AST;构建时才预扫描,且只扫真正 import 的模块路径 - 动态类名支持也影响结果:比如
class={\`text-\${color}-500\`},Tailwind 需要配safeList或白名单正则,否则漏提;UnoCSS 的@unocss/extractor-regex能命中字面量部分(如text-red-500),但变量分支仍无法推断
你自己测的时候必须控制这 3 个变量
否则对比毫无意义:
- 构建工具链要一致:都用
vite@5+@vitejs/plugin-react,禁用其他 CSS 相关插件(比如postcss对 Tailwind 是必需的,但对 UnoCSS 是冗余干扰) -
content配置必须完全相同:比如都设为['src/**/*.{ts,tsx,vue}'],不能 Tailwind 扫src/**/*而 UnoCSS 只扫src/components/**/* - 禁用缓存再测:Vite 的
.vite/deps和 UnoCSS 的.unocss-cache都删掉,跑冷启动;重复执行 200 次取 75% 分位数,不是平均值
真正容易被忽略的是:UnoCSS 的速度优势在 HMR(热更新)阶段才最痛快——改一个组件,Tailwind 可能重跑整块 CSS 构建,UnoCSS 往往只注入几行新规则。但这个体验没法用毫秒数字体现,得你亲手敲代码改 class 时手指停顿感来判断。


















