Tailwind CSS 練習問題 33：Tailwindの状態バリアント（トランスフォーム・拡大）
カード要素にマウスを乗せたときだけ、要素を1.05倍に拡大表示したい場合、正しいTailwindクラスはどれか。
- hover:scale-105
- hover:zoom-105
- hover:grow-105
- hover:big-105
- hover:size-105
正解と解説を見る
正解：hover:scale-105
Tailwind CSSではv3以降、transformクラスを別途付けなくても`scale-*`系のユーティリティがそのまま拡大縮小の変形として機能します。ホバー時のみ適用するには状態バリアント`hover:`と組み合わせます。
【正解の理由】
`hover:scale-105`はホバー時にscale(1.05)を適用する正しい記法で、要素をわずかに拡大表示できます。
【不正解の理由】
• 「hover:zoom-105」：zoomというユーティリティ名はTailwindに存在しない
• 「hover:grow-105」：growはflexアイテムの伸長率（flex-grow）を指定するユーティリティであり、拡大縮小とは無関係
• 「hover:big-105」：bigというユーティリティ名はTailwindに存在しない
• 「hover:size-105」：sizeは幅と高さを同時指定するユーティリティで、拡大縮小の変形とは異なる