Tailwind CSS 練習問題 27：Tailwindの状態バリアント（フォーカス）
Tailwind CSSにおいて、要素の背景色をホバー時に変更するだけでなく、フォーカス時（キーボード操作などで要素が選択された状態）にも異なる背景色を設定したい場合、正しいクラスの組み合わせはどれか。
- hover:bg-blue-600 focus:bg-blue-700
- hover-bg-blue-600 focus-bg-blue-700
- onhover:bg-blue-600 onfocus:bg-blue-700
- bg-hover-blue-600 bg-focus-blue-700
- hover(bg-blue-600) focus(bg-blue-700)
正解と解説を見る
正解：hover:bg-blue-600 focus:bg-blue-700
Tailwind CSSでは状態バリアント（＝要素の特定の状態に応じてスタイルを適用する仕組みのこと）を「バリアント名:クラス名」という形式のコロン区切りで表現し、hoverやfocusといった複数の状態を組み合わせて指定できます。
【正解の理由】
「hover:bg-blue-600」でホバー時の背景色、「focus:bg-blue-700」でフォーカス時の背景色をそれぞれ独立して指定でき、これがTailwindの正しい記法です。
【不正解の理由】
• 「hover-bg-blue-600 focus-bg-blue-700」：コロンではなくハイフンで繋いでおり、Tailwindのバリアント記法とは異なる
• 「onhover:bg-blue-600 onfocus:bg-blue-700」：onhoverやonfocusというバリアント名はTailwindには存在せず、正しくはhoverやfocusのみ
• 「bg-hover-blue-600 bg-focus-blue-700」：プレフィックスの順序が逆になっており、Tailwindではバリアントを先頭に置く必要がある
• 「hover(bg-blue-600) focus(bg-blue-700)」：括弧を使う記法はTailwindのバリアント指定には存在せず、コロンを使うのが正しい