ボーダー
要素のボーダースタイルを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
border-solid | border-style: solid; |
border-dashed | border-style: dashed; |
border-dotted | border-style: dotted; |
border-double | border-style: double; |
border-hidden | border-style: hidden; |
border-none | border-style: none; |
divide-solid | & > :not(:last-child) { border-style: solid; } |
divide-dashed | & > :not(:last-child) { border-style: dashed; } |
divide-dotted | & > :not(:last-child) { border-style: dotted; } |
divide-double | & > :not(:last-child) { border-style: double; } |
divide-hidden | & > :not(:last-child) { border-style: hidden; } |
divide-none | & > :not(:last-child) { border-style: none; } |
要素のボーダースタイルを制御するには、border-solid や border-dotted などのユーティリティを使用します。
border-solid
border-dashed
border-dotted
border-double
<div class="border-2 border-solid ..."></div><div class="border-2 border-dashed ..."></div><div class="border-2 border-dotted ..."></div><div class="border-4 border-double ..."></div>要素から既存のボーダーを削除するには、border-none ユーティリティを使用します。
<button class="border-none ...">Save Changes</button>これは、より小さなブレークポイントで適用されたボーダースタイルを削除するために最も一般的に使用されます。
子要素間のボーダースタイルを制御するには、divide-dashed や divide-dotted などのユーティリティを使用します。
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>プレフィックスa border-style ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。
<div class="border-solid md:border-dotted ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。