バリアント

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

例

ts

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // `hover:`プレフィックスをスライスして次のバリアントとルールに渡す
      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が適用されます。

さらに進む

バリアントシステムは非常に強力で、このガイドでは完全にカバーできません。より高度な使用方法については、デフォルトプリセットの実装を確認してください。