Wind3 プリセット

UnoCSS のための Tailwind CSS / Windi CSS コンパクトプリセット。

ソースコード

::: info @unocss/preset-wind と @unocss/preset-uno は非推奨となり、@unocss/preset-wind3 に改名されました。このプリセットは @unocss/preset-mini から継承されています。 :::

インストール

::: code-group

pnpm add -D @unocss/preset-wind3

yarn add -D @unocss/preset-wind3

npm install -D @unocss/preset-wind3

bun add -D @unocss/preset-wind3

:::

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

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

import { presetWind3 } from 'unocss'

:::

ルール

このプリセットの主な目的は、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: バリアントの設定を変更します：

presetWind3({
  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);
  }
}

オプトインメディアクエリベースのダークモード

オプトインメディアクエリベースのダークモードを使用するには、@dark: バリアントを使用します：

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

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

Tailwind CSS との違い

クォート

テンプレート（処理されるファイル）でクォートを使用することは、エクストラクターの動作によりサポートされていません。例えば、before<Content>''</Content> を書くことはできません。このような場合、class="before:content-empty" のように明示的に設定できる新しいユーティリティを導入することをお勧めします。

任意の値を持つ background-position

Tailwind は、ベア構文を使用して background-position にカスタム値を使用することを許可しています：

<div class="bg-[center_top_1rem]"></div>

Wind プリセットは center_top_1rem を色として解釈します。同じことを達成するには position: プレフィックスを使用します：

<div class="bg-[position:center_top_1rem]"></div>

アニメーション

Tailwind CSS には組み込みのアニメーションが少ないですが、私たちはそのアニメーションルールを完全にサポートし、内部的に Animate.css を統合してより多くのアニメーション効果を提供します。

animate- プレフィックスを使用して、必要なアニメーションを素早く見つけるための IntelliSense をガイドできます。

:::tip Tailwind と Animate.css の競合するアニメーション名をマージしません。Animate.css のアニメーション名を使用する必要がある場合は、animate-<name>-alt を使用してください。 :::

例えば

アニメーション効果をカスタマイズまたは変更したい場合、非常にカスタマイズ可能な設定項目を提供しています。設定項目を通じてアニメーションの持続時間、遅延、速度曲線などを変更できます。

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

カスタムアニメーションのプレビュー：

:::tip アニメーションをより良く管理するために category を追加してグループ化することもできます。これにより、下流のツールがアニメーション効果を消費しやすくなります。

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

:::

Windi CSS との違い

ブレークポイント

ブラケット構文のスペース

このプリセットは、ブラケット構文内のスペースを尊重するために , の代わりに _ を使用します。

一部の CSS ルールは値の一部として , を必要とするため、例：grid-cols-[repeat(3,auto)]

実験的機能

::: warning このプリセットには、いつでも破壊的に変更される可能性のある実験的機能が含まれています。 :::

メディアホバー

メディアホバーは、モバイルでホバースタイルを含むターゲットをタップすると、そのホバースタイルが他の場所をタップするまで持続するスティッキーホバー問題に対処します。

通常の :hover スタイルは非常に広く使用されている可能性が高いため、バリアントは通常の hover 疑似と区別するために @hover 構文を使用します。

バリアント @hover-text-red は次のように出力されます：

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity));
  }
}

オプション

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

important

• タイプ: boolean | string
• デフォルト: false

important オプションを使用すると、UnoCSS のユーティリティが !important としてマークされるかどうかを制御できます。これは、特異性の高いセレクターを持つ既存の CSS と UnoCSS を併用する場合に非常に便利です。

::: warning このオプションを使用すると、UnoCSS によって生成されたすべてのユーティリティに重要が適用されます。特定のユーティリティにのみ適用する場合は、代わりに important: バリアントを使用できます。 :::

ただし、important を true に設定すると、要素にインラインスタイルを追加するサードパーティの JS ライブラリを組み込む際に問題が発生する可能性があります。その場合、UnoCSS の !important ユーティリティがインラインスタイルを打ち消し、意図したデザインが崩れる可能性があります。

これを回避するために、#app のような ID セレクターを重要に設定することができます：

import presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      important: '#app',
    }),
  ],
})

この設定により、指定されたセレクターでユーティリティがすべてプレフィックスされ、実際に !important にすることなく特異性が増します。

ユーティリティ dark:bg-blue は次のように出力されます：

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}