Tailwind CSS 練習問題 38：Tailwindのグラデーション背景ユーティリティ
左から右方向へ、色がblue-500からpurple-500へ変化するグラデーション背景を設定したい場合、正しいクラスの組み合わせはどれか。
- bg-gradient-to-r from-blue-500 to-purple-500
- bg-gradient-r blue-500 purple-500
- gradient-to-r from-blue-500 via-purple-500
- bg-linear-to-r start-blue-500 end-purple-500
- bg-gradient from-blue-500 to-purple-500
正解と解説を見る
正解：bg-gradient-to-r from-blue-500 to-purple-500
グラデーション背景を作るには、方向を指定する`bg-gradient-to-r`と、開始色・終了色を指定する`from-`・`to-`クラスを組み合わせます。
【正解の理由】
`bg-gradient-to-r`で左から右への方向を指定し、`from-blue-500`で開始色、`to-purple-500`で終了色を指定することで、意図したグラデーションが表現できます。
【不正解の理由】
• 「bg-gradient-r blue-500 purple-500」：`bg-gradient-r`というクラス名は存在せず、色名を直接クラスに書く記法も誤り
• 「gradient-to-r from-blue-500 via-purple-500」：方向クラスの接頭辞`bg-`が欠けており、`via-`は中間色を指定するもので終了色の指定にはならない
• 「bg-linear-to-r start-blue-500 end-purple-500」：`start-`・`end-`という色指定クラスはTailwindに存在しない
• 「bg-gradient from-blue-500 to-purple-500」：方向を指定する`-to-r`部分が欠けており、方向が定まらない