Tailwind CSS 練習問題 34:Tailwindの子要素間ボーダー(区切り線)ユーティリティ
リスト内の複数の項目要素の間にだけ、水平方向の区切り線を自動的に挿入したい場合、正しいTailwindクラスはどれか。
- divide-y
- border-y
- divide-x
- space-y
- gap-y
正解と解説を見る
正解:divide-y
Tailwind CSSの`divide-*`系ユーティリティは、親要素に指定することで直下の子要素同士の間にだけ境界線を挿入できる機能です。
【正解の理由】
`divide-y`は子要素間に水平方向の境界線(上下の区切り線)を追加するユーティリティで、リストの各項目間に線を入れる用途に適しています。
【不正解の理由】
• 「border-y」:要素自体の上下端にボーダーを付けるものであり、子要素間の区切りには使えない
• 「divide-x」:子要素間に垂直方向の境界線を追加するもので、水平な区切り線には使えない
• 「space-y」:子要素間に余白(マージン)を追加するものであり、境界線は描画されない
• 「gap-y」:グリッドやフレックスのアイテム間の隙間を指定するもので、境界線とは無関係