ミニプリセット

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

ソースコード

インストール

pnpm

pnpm add -D @unocss/preset-mini

yarn

yarn add -D @unocss/preset-mini

npm

npm install -D @unocss/preset-mini

uno.config.ts

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

export default defineConfig({
  presets: [
    presetMini(),
    // ...other presets
  ],
})

ヒント

このプリセットはunocssパッケージに含まれています。そこからインポートすることもできます。

import { presetMini } from 'unocss'

ルール

このプリセットは@unocss/preset-windのサブセットであり、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:バリアントを使用できます。

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

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

または、dark:バリアントの設定でグローバルに設定します。

presetMini({
  dark: 'media'
})

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は最終的にデフォルトのテーマに深くマージします。

警告

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 {
  /**
   * Selector for light variant.
   *
   * @default '.light'
   */
  light?: string

  /**
   * Selector for dark variant.
   *
   * @default '.dark'
   */
  dark?: string
}

attributifyPseudo

• **タイプ:** Boolean
• **デフォルト:** false

擬似セレクターを.groupの代わりに[group=""]として生成します。

variablePrefix

• **タイプ:** string
• **デフォルト:** un-

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

prefix

• **タイプ:** string | string[]
• **デフォルト:** undefined

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

preflight

• **タイプ:** boolean
• **デフォルト:** true

プリフライトを生成します。