Uno preset ​

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

Source Code

Installation ​

pnpm add -D @unocss/preset-uno

pnpm add -D @unocss/preset-uno

yarn add -D @unocss/preset-uno

yarn add -D @unocss/preset-uno

npm install -D @unocss/preset-uno

npm install -D @unocss/preset-uno

// 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(),
  ],
})

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, both ml-3 (Tailwind), ms-2 (Bootstrap), ma4 (Tachyons), and mt-10px (Windi CSS) are valid.

.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 ​

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