バリアント

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

例

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 が生成されます：

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

これにより、ユーザーが要素にホバーしたときにのみ m-2 が適用されます。

さらに進む

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