Tailwind CSS 練習問題 63：トランジションの対象
Tailwind CSSにおいて、要素の背景色や文字色などの「色に関するプロパティだけ」を対象に、滑らかなアニメーション（トランジション）を適用したい場合、正しいクラスはどれか。
- `transition-colors` クラスを指定して色のみを対象にする
- `transition-color` クラスを指定して色のみを対象にする
- `animate-colors` クラスを指定して色のみを対象にする
- `color-transition` クラスを指定して色のみを対象にする
- `bg-text-transition` クラスを指定して色のみを対象にする
正解と解説を見る
正解：`transition-colors` クラスを指定して色のみを対象にする
正解は、「transition-colors」というクラスを使用する記述です。
【正解の理由】
Tailwind CSSでは、`transition-colors`クラスを指定することで、背景色、文字色、ボーダー色、装飾色といった「色に関するプロパティ」のみをトランジション（＝状態変化時の滑らかなアニメーション）の対象にすることができます。これにより、他のプロパティの変化には影響を与えずに色の変化だけを滑らかにできます。
【不正解の理由】
• 「`transition-color`」というクラスは、末尾の「s」が欠けており正しいクラス名ではない
• 「`animate-colors`」というクラスは、キーフレームアニメーション用の「animate-」プレフィックスを誤って使用している
• 「`color-transition`」というクラスは、プロパティ名と「transition」の順序が逆転しており無効
• 「`bg-text-transition`」というクラスは、Tailwindに存在しない独自のクラス名であり誤り