Mini preset

UnoCSSのための基本プリセットで、最も基本的なユーティリティのみを含みます。

ソースコード

インストール

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

bun

bun add -D @unocss/preset-mini

import presetMini from '@unocss/preset-mini'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetMini(),
    // ...他のプリセット
  ],
})

TIP

このプリセットはunocssパッケージに含まれており、そこからもインポートできます：

import { presetMini } from 'unocss'

ルール

このプリセットは@unocss/preset-wind3のサブセットであり、CSSのプロパティに沿った最も基本的なユーティリティのみを含みますが、Tailwind CSSで導入された意見的または複雑なユーティリティ（container、animation、gradientなど）は除外されています。Tailwind CSSやWindi CSSの馴染みのあるユーティリティをベースに独自のカスタムプリセットを作成する際の良い出発点となります。

機能

ダークモード

デフォルトでは、このプリセットはdark:バリアントを使ったクラスベースのダークモードを生成します。

<div class="dark:bg-red:10" />

は以下のように生成されます：

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

メディアクエリベースのダークモード

グローバルにメディアクエリベースのダークモードを使用するには、dark:バリアントの設定を変更します：

presetMini({
  dark: 'media'
})

これで

<div class="dark:bg-red:10" />

は以下のように生成されます：

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

CSS @layer

CSSのネイティブ@layerはlayer-xx:バリアントでサポートされています。

<div class="layer-foo:p4" />
<div class="layer-bar:m4" />

は以下のように生成されます：

@layer foo {
  .layer-foo\:p4 {
    padding: 1rem;
  }
}
@layer bar {
  .layer-bar\:m4 {
    margin: 1rem;
  }
}

テーマ

設定でテーマプロパティを完全にカスタマイズでき、UnoCSSは最終的にそれをデフォルトテーマに深くマージします。

WARNING

breakpointsプロパティは深くマージされず、上書きされます。Breakpointsを参照してください。

presetMini({
  theme: {
    // ...
    colors: {
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      }
    },
  }
})

オプション

dark

• 型: class | media | DarkModeSelectors
• デフォルト: class

ダークモードのオプション。class、media、またはカスタムセレクターオブジェクト（DarkModeSelectors）を指定できます。

interface DarkModeSelectors {
  /**
   * ライトバリアントのセレクター。
   *
   * @default '.light'
   */
  light?: string

  /**
   * ダークバリアントのセレクター。
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• 型: Boolean
• デフォルト: false

.groupの代わりに[group=""]のような疑似セレクターを生成します。

variablePrefix

• 型: string
• デフォルト: un-

CSSカスタムプロパティのプレフィックス。

prefix

• 型: string | string[]
• デフォルト: undefined

ユーティリティのプレフィックス。

preflight

• 型: boolean | on-demand
• デフォルト: true

preflight cssを生成します。

• true: 常にpreflightを生成。
• false: preflightを生成しない。
• on-demand: 使用されたユーティリティのみpreflightを生成。