Tailwind vs UnoCSS 对比

要点

• Tailwind 提供「开箱即用」的 preset、插件、tailwind-merge、IDE 支持和社区范式；UnoCSS 提供高度可定制的 rules/variants/preset，但 merge/提示需自养。
• 选择标准：是否要复用社区资产、是否有资源维护规则库、对运行时/编译速度的需求、是否需要极度自定义的类名语义。

决策表（精简版）

维度	Tailwind	UnoCSS
生态/社区	官方插件 + 大量社区 preset/组件范式，tailwind-merge 成熟	rule/variant 任意扩展，高度灵活；预设较少，需要自养
类型提示	官方 language-service，IDE 友好	依赖 preset/插件质量，需额外配置
Merge 去重	tailwind-merge 针对 Tailwind 语义完善	默认不做去重，需自写或引入规则
运行时/JIT	v4 JIT 稳定，RSC/SSR 产物成熟	即时模式极快，自定义自由；规则库越大越需维护
迁移/资产	现成组件库（shadcn/ui、reka-ui）、设计体系示例丰富	灵活性高，迁移成本取决于自建规则与团队习惯

什么时候选 Tailwind？

• 不想维护 merge/variant/IDE 提示规则，倾向「拿来即用」。
• 需要快速复用社区资产、Preset、组件库（shadcn/ui、reka-ui 等）。
• 关注 RSC/SSR 稳定性、插件完备度，或需要让外部协作者迅速上手。

什么时候选 UnoCSS？

• 希望完全自定义类名语义（甚至 DSL），或已有内部 preset 库。
• 产物/规则必须极度可控（小程序/低码等），团队可维护规则和 merge 逻辑。
• 需要极快的即时模式，能接受自行实现去重/类型提示。

集成/实践差异

• IDE：Tailwind 语言服务即插即用；Uno 需根据 preset 配置提示插件。
• Merge：Tailwind 配 tailwind-merge，遇自定义 tokens/尺寸需更新规则；Uno 默认不去重，需要自写或组合。
• content 扫描：两者都需精准 content，Tailwind v4 JIT 对 SSR/RSC 产物更成熟；Uno 自定义时也要防止通配放大产物。
• 插件链：Tailwind 官方 typography/forms/animate 等即用；Uno 插件生态较少但可自由拼接规则。

简易选择流程（文本版）

1. 是否要复用现成组件/范式？要 → Tailwind；无所谓 → 继续。
2. 是否有维护规则库的人力？没有 → Tailwind；有 → 继续。
3. 是否需要极短类名/DSL？需要 → UnoCSS；不需要 → Tailwind。
4. 是否首屏/产物极限压缩并可自管规则？是 → UnoCSS；否则 Tailwind。

常见坑与对策

• Tailwind：content 过宽、动态类膨胀 → 收紧扫描范围，使用 cva/tv 参数化；自定义 tokens 记得更新 tailwind-merge 规则。
• UnoCSS：规则/merge/提示需要自养 → 建 preset 仓库 + merge 规则；对 DSL 做 lint，避免团队分叉。
• 两者：关系类嵌套过深可读性差 → 约束 group/peer/aria/data 深度；保持 tokens 映射表。