Qraft(クラフト) 資格・学習クイズアプリ

Tailwind CSS 練習問題 23:Tailwindの文字色(テキストカラー)ユーティリティ

Tailwind CSSにおいて、要素の文字色をテーマのグレー系カラーパレットにおける中間的な濃さ(gray-500)に設定したい場合、正しいクラスはどれか。

  1. text-gray-500
  2. color-gray-500
  3. font-gray-500
  4. text-color-gray-500
  5. 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の命名規則に反する

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)