本篇博客翻译自Why UnoCSS

动机

我们建议您阅读UnoCSS的创建者Anthony Fu撰写的博客文章《重新构想原子CSS》，以更好地了解UnoCSS背后的动机。

UnoCSS与X之间的不同

Windi CSS

UnoCSS是由Windi CSS团队的一名成员发起的，从我们在Windi CSS中的工作中获得了很多灵感。虽然Windi CSS自2023年3月起不再积极维护，但您可以将UnoCSS视为Windi CSS的“精神继承者”。

UnoCSS继承了Windi CSS的按需加载、属性模式、快捷方式、变体组、编译模式等特性。此外，UnoCSS是从头开始构建的，以最大的可扩展性和性能为目标，使我们能够引入新功能，如纯CSS图标、无值属性模式、标签模式、Web字体等。

最重要的是，UnoCSS被提取为一个原子CSS引擎，其中所有功能都是可选的，使您能够轻松创建自己的约定、设计系统和预设 - 并结合您想要的功能组合。

Tailwind CSS

Both Windi CSS和UnoCSS都从Tailwind CSS中获得了很多灵感。由于UnoCSS是从头开始构建的，我们能够全面了解原子CSS是如何通过前期工作进行设计，并将其抽象为一个优雅而强大的API。由于设计目标有很大的不同，所以与Tailwind CSS进行直接的苹果对苹果比较并不太合适。但是我们将尝试列出一些区别：

Tailwind CSS是一个PostCSS插件，而UnoCSS是一个具有一堆与构建工具的一流集成（包括一个PostCSS插件）的同构引擎。这意味着UnoCSS可以更加灵活地在不同的地方使用（例如在运行时生成CSS的CDN Runtime），并与构建工具深度集成，以提供更好的HMR、性能和开发者体验（例如，检查器）。

除了技术上的取舍之外，UnoCSS还被设计为完全可扩展和可定制，而Tailwind CSS则更具有明确的意见。在Tailwind CSS之上构建自定义设计系统（或设计令牌）可能会很困难，并且您不能真正摆脱Tailwind CSS的约定。而使用UnoCSS，您可以完全控制地构建几乎任何您想要的东西。例如，我们在一个预设中实现了整个与Tailwind CSS兼容的实用工具集，而且还有许多令人惊叹的社区预设实现了其他有趣的哲学。

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

为了使其更具灵活怼Œ您可以逿‡将规则的第一ª参数（我们称之为匹配器）更改为正则表达式，并将其主体更改为函数来使规则变得动怌–，例如：

1
2
3
4
5
6
7
// uno.config.ts
export default defineConfig({
      rules: [
      -    ['m-1', { margin: '1px' }]
      +    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
        ],
})

逿‡这样做，现在您可以拥有任意的边距实用工具，例如m-1ã100或m-52.43　¸”，UnoCSS只在您使用它们时才会生成相应的样式ã```html

Hello
World
1
2

```css
- [Variant Groups](https://unocss.dev/transformers/variant-group) - [Shortcuts](https://unocss.dev/config/shortcuts) - [Tagify](https://unocss.dev/presets/tagify) - [Web fonts](https://unocss.dev/presets/web-fonts) - [CDN Runtime](https://unocss.dev/integrations/runtime) - [Inspector](https://unocss.dev/tools/inspector)

UnoCSS确实不支持Tailwind CSS的插件系统或配置，这意味着从一个定制程度很高的Tailwind CSS项目迁移到UnoCSS可能会更加困难。这是为了使UnoCSS具有高性能和可扩展性而做出的有意决策，我们相信这种权衡是值得的。