Wind3 preset

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

ソースコード

INFO

@unocss/preset-windと@unocss/preset-unoは非推奨となり、@unocss/preset-wind3に名前が変更されました。このプリセットは@unocss/preset-miniを継承しています。

インストール

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

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-['']と書くことはできません。このような場合は、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を使用してください。

例えば

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-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',
      },
    }
  }
})

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

animate-custom

TIP

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

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

Windi CSSとの違い

ブレークポイント

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

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

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

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

一部の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:バリアントを使用できます。

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

これを回避するには、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));
}