Tailwind CSS 練習問題 28:Tailwindの重なり順(z-index)ユーティリティ
Tailwind CSSにおいて、要素にz-indexを50に設定したい場合、正しいクラスはどれか。
- z-50
- index-50
- z-index-50
- layer-50
- stack-50
正解と解説を見る
正解:z-50
Tailwind CSSではz-indexを設定する際、「z-」というプレフィックスに数値を組み合わせたクラスを使用します。z-50はz-index: 50に対応します。
【正解の理由】
Tailwindのz-indexユーティリティは「z-{数値}」という命名規則に従っており、z-0、z-10、z-20、z-30、z-40、z-50などのデフォルト値が用意されています。
【不正解の理由】
• 「index-50」:Tailwindにこのようなクラス名は存在しない
• 「z-index-50」:CSSプロパティ名をそのまま使った形式であり、Tailwindの命名規則ではない
• 「layer-50」:Tailwindにこのようなクラス名は存在しない
• 「stack-50」:Tailwindにこのようなクラス名は存在しない