Unoプリセット

UnoCSSのデフォルトプリセットです。現在は@unocss/preset-windと等価です。

ソースコード

情報

このプリセットは@unocss/preset-windと@unocss/preset-miniを継承しています。

インストール

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パッケージに含まれています。そこからインポートすることもできます。

import { presetUno } from 'unocss'

使用方法

このプリセットは、Tailwind CSS、Windi CSS、Bootstrap、Tachyonsなど、人気のユーティリティファーストフレームワークの共通のスーパーセットを提供することを目指しています。

たとえば、ml-3（Tailwind CSS）、ms-2（Bootstrap）、ma4（Tachyons）、mt-10px（Windi CSS）はすべて有効です。

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

ルール

このプリセットはTailwind CSSとWindi CSSと互換性があります。詳細な使用方法については、それぞれのドキュメントを参照してください。

このプリセットに含まれるすべてのルールとプリセットについては、インタラクティブドキュメントを参照するか、ソースコードに直接アクセスしてください。

オプション

情報

このプリセットのオプションは@unocss/preset-miniから継承されています。

デフォルトプリセットの詳細については、プレイグラウンドで確認して試すことができます。また、実装も確認できます。