Tailwind CSS 練習問題 15:Tailwindのフォントウェイト(font-weight)ユーティリティ
Tailwind CSSにおいて、要素のテキストを太字(font-weight: 700)にしたい場合、正しいクラスはどれか。
- font-bold
- text-bold
- font-weight-700
- bold-text
- font-700
正解と解説を見る
正解:font-bold
Tailwind CSSでテキストを太字にするには「font-bold」クラスを使用します。これはfont-weight: 700に対応します。
【正解の理由】
Tailwindでは「font-」プレフィックスに続けてthin、light、normal、medium、semibold、bold、extrabold、blackなどのキーワードを指定することでfont-weightを制御します。「font-bold」はfont-weight: 700を適用する標準ユーティリティクラスです。
【不正解の理由】
• 「text-bold」:Tailwindには存在しないクラス名。テキスト関連のユーティリティは「text-」プレフィックスだが、太さの指定には使われない
• 「font-weight-700」:CSSのプロパティ名と値をそのまま繋げた形式だが、Tailwindの命名規則には存在しない
• 「bold-text」:Tailwindの命名規則(プロパティ名が先、値が後)に合っておらず存在しないクラス
• 「font-700」:数値を直接指定する形式はTailwindの標準クラスには存在しない(カスタム設定を除く)