Tailwind CSS 練習問題 35：Tailwindのダークモードバリアント
ユーザーのOS設定などでダークモードが有効な場合にだけ、背景色をgray-800に変更したい場合、正しいTailwindクラスはどれか。
- dark:bg-gray-800
- night:bg-gray-800
- bg-dark:gray-800
- dark-bg:gray-800
- theme-dark:bg-800
正解と解説を見る
正解：dark:bg-gray-800
Tailwind CSSにはダークモード用の状態バリアント`dark:`が組み込みで用意されており、設定に応じて自動または手動でダークモード時のスタイルを切り替えられます。
【正解の理由】
`dark:bg-gray-800`はダークモードが有効な場合にのみbg-gray-800を適用する正しい記法です。
【不正解の理由】
• 「night:bg-gray-800」：nightというバリアント名はTailwindに存在しない
• 「bg-dark:gray-800」：バリアントとユーティリティの記述順序が逆であり、正しい構文ではない
• 「dark-bg:gray-800」：dark-bgという名前のバリアントはTailwindに存在しない
• 「theme-dark:bg-800」：theme-darkというバリアント名は存在せず、また色番号の指定方法も不正確