为什么选择UnoCSS?

UnoCSS是即时原子CSS引擎，设计为灵活和可扩展。核心是不固执己见的，所有CSS实用程序都是通过预设提供的。

例如，您可以通过在本地提供规则来定义自定义CSS实用程序 config file.

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

这将为您的项目添加一个新的CSS m-1。由于UnoCSS是按需的，除非你在代码库中使用它，否则它不会做任何事情。假设我们有这样一个组件：

html

<div class="m-1">Hello</div>

m-1 将被检测到，并将生成以下CSS:

css

.m-1 { margin: 1px; }

为了使其更灵活，您可以将规则的第一个参数（我们称之为matcher）更改为“RegExp”，并将主体更改为函数，从而使规则具有动态性，例如：

diff

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

通过这样做，现在您可以拥有任意的保证金实用程序, like m-1, m-100 or m-52.43. 同样，UnoCSS只会在您使用它们时生成它们。

html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

预设

一旦你制定了一些规则，你就可以将它们提取到一个预设中，并与他人共享。例如，您可以为公司的设计系统创建预设，并与团队共享。

// my-preset.ts
import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

// uno.config.ts
import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // your own preset
  ],
})

So similarly, we provided a few official presets for you to start using right away, and you can also find many interesting community presets.

演示

你可以在浏览器中尝试UnoCSS, in the Playground. Or look up utilities from the default presets in the Interactive Docs.

Integrations

UnoCSS集成了各种框架/工具：

Examples

所有示例的源代码都可以在中找到/examples directory.

为什么选择UnoCSS? ​

预设 ​

演示 ​

Integrations ​

Examples ​

为什么选择UnoCSS?

预设

演示

Integrations

Examples