UnoCSS

UnoCSS 有何不同?​

Windi CSS​

UnoCSS 是由 Windi CSS 团队成员之一发起的，我们在 Windi CSS 中所做的工作中汲取了很多灵感。虽然 Windi CSS 不再被积极维护（截至 2023 年 3 月），但您可以将 UnoCSS 视为 Windi CSS 的“精神继承者”。

UnoCSS 继承了 Windi CSS 的按需特性、属性模式、快捷方式、变量组、编译模式等等。最重要的是，UnoCSS 是从头开始构建的，考虑到了最大的可扩展性和性能，使我们能够引入新功能，如 纯 CSS 图标、无值属性、标记、网络字体等。

最重要的是，UnoCSS 是一个提取式的原子 CSS 引擎，其中所有功能都是可选的，并且可以轻松创建你自己的设计系统和自己的预设 – 组合成你想要的功能。

Tailwind CSS​

Windi CSS 和 UnoCSS 都从 Tailwind CSS 中汲取了很多灵感。由于 UnoCSS 是从头开始构建的，因此我们能够很好地了解原子 CSS 是如何利用现有技术进行设计并抽象为优雅而强大的 API 的。由于设计目标截然不同，因此它与 Tailwind CSS 并不是真正的同类比较。但我们将尝试列出一些差异。

Tailwind CSS 是一个 PostCSS 插件，而 UnoCSS 是一个同构引擎，具有与构建工具（包括 PostCSS plugin 插件）的一流集成集合。这意味着 UnoCSS 可以更加灵活地用于不同的地方（例如，CDN Runtime，它动态生成 CSS），并且与构建工具深度集成，以提供更好的 HMR、性能和开发人员体验（例如，代码检查器）。

Technical trade-offs aside, UnoCSS is also designed to be fully extensible and customizable, while Tailwind CSS is more opinionated. Building a custom design system (or design tokens) on top of Tailwind CSS can be hard, and you can’t really move away from the Tailwind CSS’s conventions. With UnoCSS, you can build pretty much anything you want with full control. For example, we implemented the whole Tailwind CSS compatible utilities within a single preset, and there are a lot of awesome community presets implemented with other interesting philosophies.

除了技术上的权衡之外，UnoCSS 还被设计为完全可扩展和可定制，而 Tailwind CSS 则不易改变。在 Tailwind CSS 之上构建自定义设计系统（或设计令牌）可能很困难，而且你无法真正摆脱 Tailwind CSS 的约定。使用 UnoCSS，你可以完全控制地构建几乎任何你想要的东西。例如，我们在单个预设中实现了整个 Tailwind CSS 兼容程序，并且还有许多很棒的社区预设与其他有趣的理念一起实现。

由于 UnoCSS 提供的灵活性，我们能够在其之上尝试许多创新功能，例如：

• 纯 CSS 图标
• 属性化模式
• 变量组
• 快捷方式
• 标记
• 网络字体
• CDN 运行时
• 代码检查器

由于与 Tailwind CSS 的设计目标不同，UnoCSS 不支持 Tailwind CSS 的插件系统或配置，这意味着它可能会使从高度定制的 Tailwind CSS 项目迁移变得更加困难。这是为了使 UnoCSS 具有高性能和可扩展性而做出的决定，我们相信这种权衡是值得的。