Appearance
为什么选择 UnoCSS？
¥Why UnoCSS?
动机
¥Motivations
我们建议你阅读 UnoCSS 的创建者 Anthony Fu 撰写的博客文章 重新构想原子 CSS，以更好地了解 UnoCSS 背后的动机。
¥We recommend you to read the blog post Reimagine Atomic CSS written by the creator of UnoCSS, Anthony Fu, to get a better understanding of the motivation behind UnoCSS.
UnoCSS 与 X 有何不同？
¥How is UnoCSS Different from X?
Windi CSS
UnoCSS 是由 Windi CSS 的一名团队成员发起的，从我们在 Windi CSS 中所做的工作中汲取了很多灵感。虽然 Windi CSS 不再被积极维护（截至 2023 年 3 月），但你可以将 UnoCSS 视为 Windi CSS 的 "精神继承者"。
¥UnoCSS was started by one of the Windi CSS's team members, with a lot of inspiration taken from the work we did in Windi CSS. While Windi CSS is no longer actively maintained (as of March 2023), you may consider UnoCSS as a "spiritual successor" of Windi CSS.
UnoCSS 继承了 Windi CSS 的按需特性，属性化模式、快捷方式、变体组、编译模式 等等。最重要的是，UnoCSS 是从头开始构建的，考虑到了最大的可扩展性和性能，使我们能够引入 纯 CSS 图标、无值的属性化、标签化、网络字体 等新功能。
¥UnoCSS inherits Windi CSS's on-demand nature, attributify mode, shortcuts, variant groups, compilation mode and a lot more. On top of that, UnoCSS is built from the ground up with the maximum extensibility and performance in mind, making us able to introduce new features like pure CSS icons, valueless attributify, tagify, web fonts, etc.
最重要的是，UnoCSS 被提取为原子 CSS 引擎，其中所有功能都是可选的，并且可以轻松创建你自己的约定、自己的设计系统和自己的预设 - 与你想要的功能的组合。
¥Most importantly, UnoCSS is extracted as an atomic CSS engine, where all the features are optional, and making it easy to create your own conventions, own design system, and own presets - with the combinations of the features you want.
Tailwind CSS
Windi CSS 和 UnoCSS 都从 Tailwind CSS 中汲取了很多灵感。由于 UnoCSS 是从头开始构建的，因此我们能够很好地了解原子 CSS 是如何利用现有技术进行设计并抽象为优雅而强大的 API 的。由于设计目标截然不同，因此它与 Tailwind CSS 并不是真正的同类比较。但我们将尝试列出一些差异。
¥Both Windi CSS and UnoCSS took a lot of inspiration from Tailwind CSS. Since UnoCSS is built from the ground up, we are able to have a great overview of how atomic CSS has been designed with prior arts and abstracted into an elegant and powerful API. With quite different design goals, it's not really an apples-to-apples comparison with Tailwind CSS. But we will try to list a few differences.
Tailwind CSS 是一个 PostCSS 插件，而 UnoCSS 是一个同构引擎，具有与构建工具（包括 PostCSS 插件）的一流集成集合。这意味着 UnoCSS 可以更灵活地用于不同的地方（例如，CDN 运行时，它动态生成 CSS），并且与构建工具深度集成，以提供更好的 HMR、性能和开发者体验（例如，检查器 ）。
¥Tailwind CSS is a PostCSS plugin, while UnoCSS is an isomorphic engine with a collection of first-class integrations with build tools (including a PostCSS plugin). This means UnoCSS can be much more flexible to be used in different places (for example, CDN Runtime, which generates CSS on the fly) and have deep integrations with build tools to provide better HMR, performance, and developer experience (for example, the Inspector).
除了技术上的权衡之外，UnoCSS 还被设计为完全可扩展和可定制，而 Tailwind CSS 则更加有态度。在 Tailwind CSS 之上构建自定义设计系统（或设计令牌）可能很困难，而且你无法真正摆脱 Tailwind CSS 的约定。使用 UnoCSS，你可以完全控制地构建几乎任何你想要的东西。例如，我们在 单个预设 中实现了整个 Tailwind CSS 兼容工具，并且有很多 很棒的社区预设 实现了其他有趣的理念。
¥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 提供的灵活性，我们能够在其之上尝试许多创新功能，例如：
¥Thanks to the flexibility UnoCSS provides, we are able to experiment with a lot of innovative features on top of it, for example:
由于与 Tailwind CSS 的设计目标不同，UnoCSS 不支持 Tailwind CSS 的插件系统或配置，这意味着它可能会使从高度定制的 Tailwind CSS 项目迁移变得更加困难。这是为了使 UnoCSS 具有高性能和可扩展性而做出的决定，我们相信这种权衡是值得的。
¥Due to the differing design goals over Tailwind CSS, UnoCSS does not support Tailwind CSS's plugin system or configurations, meaning it might make it harder to migrate from a heavily customized Tailwind CSS project. This is the intended decision to make UnoCSS high-performant and extensible, and we believe the trade-off is worth it.