Skip to content
On this page

Uno preset

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

Source Code

INFO

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

Installation

bash
pnpm add -D @unocss/preset-uno
pnpm add -D @unocss/preset-uno
bash
yarn add -D @unocss/preset-uno
yarn add -D @unocss/preset-uno
bash
npm install -D @unocss/preset-uno
npm install -D @unocss/preset-uno
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})
// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

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

TIP

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

ts
import { presetUno } from 'unocss'
import { presetUno } from 'unocss'

Usage

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

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

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

Rules

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

INFO

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.

Released under the MIT License.