Tailwind CSS 練習問題 25:Tailwindの文字変換(text-transform)ユーティリティ
Tailwind CSSにおいて、要素の文字を大文字に変換して表示したい(CSSのtext-transform: uppercaseに相当する)場合、正しいクラスはどれか。
- uppercase
- text-upper
- capitalize-all
- font-uppercase
- text-transform-upper
正解と解説を見る
正解:uppercase
Tailwind CSSではtext-transformプロパティに対応するユーティリティクラスとして、uppercase、lowercase、capitalize、normal-caseが用意されています。
【正解の理由】
「uppercase」はtext-transform: uppercaseに対応する単体のクラス名であり、テキストをすべて大文字に変換して表示します。
【不正解の理由】
• 「text-upper」:Tailwindの実際の命名規則には存在しない架空のクラス名
• 「capitalize-all」:Tailwindには「capitalize」という単語の先頭のみを大文字にするクラスは存在するが、「capitalize-all」というクラスは存在しない
• 「font-uppercase」:fontというプレフィックスはフォントの太さやファミリーに使われ、文字変換には使われない
• 「text-transform-upper」:Tailwindではプロパティ名をそのままクラス名にはせず、意味の分かる単語(uppercaseなど)を直接クラス名として使う