UnoCSS

外観

Windプリセット ​

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

ソースコード

情報

このプリセットは@unocss/preset-miniを継承しています。

インストール ​

bash
pnpm add -D @unocss/preset-wind
bash
yarn add -D @unocss/preset-wind
bash
npm install -D @unocss/preset-wind
uno.config.ts
ts
import presetWind from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

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

ヒント

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

ts
import { presetWind } from 'unocss'

ルール ​

このプリセットの主な目標は、Tailwind CSS および Windi CSS との互換性を提供することです。完全な互換性は保証されない場合があることに注意してください。詳細な使用方法については、それぞれのドキュメントを参照してください。

このプリセットに含まれるすべてのルールとプリセットについては、インタラクティブドキュメントを参照するか、ソースコードに直接アクセスしてください。

Tailwind CSSとの違い ​

引用符 ​

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

任意の値を持つbackground-position ​

Tailwindは、ベア構文を使用してbackground-positionにカスタム値を使用できます。

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

Windプリセットは、代わりにcenter_top_1remを色として解釈します。同じことを行うには、position:プレフィックスを使用してください。

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

Windi CSSとの違い ​

ブレークポイント ​

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

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

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

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

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

実験的機能 ​

警告

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

メディアホバー ​

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

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

バリアント@hover-text-redは以下を出力します。

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

オプション ​

情報

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

important ​

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

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

警告

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

ただし、importantをtrueに設定すると、要素にインラインスタイルを追加するサードパーティのJSライブラリを組み込む際に問題が発生する可能性があります。このような場合、UnoCSSの!importantユーティリティはインラインスタイルよりも優先されるため、意図したデザインが壊れる可能性があります。

これを回避するには、importantを#appのようなIDセレクターに設定します。

uno.config.ts
ts
import presetWind from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

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

この構成では、すべてのユーティリティに指定されたセレクターがプレフィックスとして付けられ、実際に!importantにすることなく、効果的に特異性が高まります。

ユーティリティdark:bg-blueは以下を出力します。

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

MITライセンスの下でリリースされています。

Copyright © 2021-PRESENT Anthony Fu