バリアント

バリアントを使用すると、Tailwind CSSの`hover:`バリアントのように、既存のルールにいくつかのバリエーションを適用できます。

例

ts

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

`matcher`は、バリアントが有効になるタイミングを制御します。戻り値が文字列の場合、ルールに一致するセレクターとして使用されます。
`selector`は、生成されたCSSセレクターをカスタマイズする機能を提供します。

内部動作

`hover:m-2`のマッチング時に何が起こったかを見てみましょう。

`hover:m-2`はユーザーの使用状況から抽出されます。
`hover:m-2`は、マッチングのためにすべてのバリアントに送信されます。
`hover:m-2`はバリアントと一致し、`m-2`を返します。
結果の`m-2`は、次のバリアントマッチングに使用されます。
他に一致するバリアントがない場合、`m-2`はルールとのマッチングに進みます。
最初のルールが一致し、`.m-2 { margin: 0.5rem; }`が生成されます。
最後に、バリアントの変換を生成されたCSSに適用します。この場合、`selector`フックに`:hover`を付加します。

結果として、以下のCSSが生成されます。

css

.hover\:m-2:hover { margin: 0.5rem; }

これにより、ユーザーが要素にカーソルを合わせた場合にのみ`m-2`が適用されます。

さらに詳しく

バリアントシステムは非常に強力であり、このガイドではすべてを網羅することはできません。デフォルトプリセットの実装を確認して、より高度な使用方法をご覧ください。