Tailwind CSS 練習問題 23:Tailwindの文字色(テキストカラー)ユーティリティ
Tailwind CSSにおいて、要素の文字色をテーマのグレー系カラーパレットにおける中間的な濃さ(gray-500)に設定したい場合、正しいクラスはどれか。
- text-gray-500
- color-gray-500
- font-gray-500
- text-color-gray-500
- gray-text-500
正解と解説を見る
正解:text-gray-500
Tailwind CSSでは文字色を指定する際は「text-」というプレフィックス(=接頭辞のこと)にカラー名と濃淡の数値を組み合わせて指定します。gray-500はグレーの中間的な濃さを表します。
【正解の理由】
text-{color}-{shade}という命名規則に従い、text-gray-500が正しい文字色指定のクラスです。
【不正解の理由】
• 「color-gray-500」:Tailwindには存在しない命名規則で、colorというプレフィックスは使われない
• 「font-gray-500」:fontはフォントの太さやファミリーを指定するプレフィックスであり、色指定には使われない
• 「text-color-gray-500」:colorという単語を余分に挟んでおり、Tailwindの実際のクラス名と一致しない
• 「gray-text-500」:プレフィックスの順序が逆になっており、Tailwindの命名規則に反する