Mini preset

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

ソースコード

インストール

::: code-group

pnpm add -D @unocss/preset-mini

yarn add -D @unocss/preset-mini

npm install -D @unocss/preset-mini

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

プレフライト CSS を生成します。次のいずれかです:

• true: 常にプレフライトを生成します。
• false: プレフライトを生成しません。
• on-demand: 使用されたユーティリティに対してのみプレフライトを生成します。