Uno 预设

¥Uno preset

UnoCSS 的默认预设。目前相当于 @unocss/preset-wind。

¥The default preset for UnoCSS. It's currently equivalent to @unocss/preset-wind.

源代码

¥Source Code

信息

该预设继承了 @unocss/preset-wind 和 @unocss/preset-mini。

¥This preset inherits @unocss/preset-wind and @unocss/preset-mini.

安装

¥Installation

pnpm

pnpm add -D @unocss/preset-uno

yarn

yarn add -D @unocss/preset-uno

npm

npm install -D @unocss/preset-uno

uno.config.ts

import presetUno from '@unocss/preset-uno'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})

提示

该预设包含在 unocss 包中，你也可以从那里导入它：

¥This preset is included in the unocss package, you can also import it from there:

import { presetUno } from 'unocss'

用法

¥Usage

此预设尝试提供流行的工具优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等。

¥This preset attempts to provide a common superset of the popular utility-first frameworks, including Tailwind CSS, Windi CSS, Bootstrap, Tachyons, etc.

例如，ml-3 (Tailwind CSS)、ms-2 (Bootstrap)、ma4 (Tachyons) 和 mt-10px (Windi CSS) 均有效。

¥For example, ml-3 (Tailwind CSS), ms-2 (Bootstrap), ma4 (Tachyons), and mt-10px (Windi CSS) are all valid.

.ma4 {
  margin: 1rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.mt-10px {
  margin-top: 10px;
}

规则

¥Rules

该预设兼容 Tailwind CSS 和 Windi CSS，详细使用方法可以参考 文档。

¥This preset is compatible with Tailwind CSS and Windi CSS, you can refer to their documentation for detailed usage.

本预设中包含的所有规则和预设请参考我们的 交互式文档 或直接进入 源代码。

¥For all rules and presets included in this preset, please refer to our interactive docs or directly go to the source code.

选项

¥Options

信息

该预设的选项继承自 @unocss/preset-mini。

¥This preset's options are inherited from @unocss/preset-mini.

有关默认预设的更多详细信息，你可以查看我们的 在线运行 并尝试一下。同时，你还可以查看 实现。

¥For more details about the default preset, you can check out our playground and try it out. Meanwhile, you can also check out the implementations.