主题
为什么选择 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 的按需特性、attributify 模式、快捷方式、变体组、编译模式 以及更多功能。除此之外，UnoCSS 从零开始构建，充分考虑了最大可扩展性和性能，使我们能够引入诸如 纯 CSS 图标、无值 attributify、标签化、网络字体 等新功能。
🌐 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.