分割線スタイル

​基本的な使い方

​分割線スタイルの設定

divide-{style}ユーティリティを使用して、要素間のボーダースタイルを制御します。

<div class="divide-y divide-dashed">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

---

​条件付き適用

​ホバー、フォーカス、その他の状態

Tailwindでは、バリアント修飾子を使用して、異なる状態でユーティリティクラスを条件付きで適用できます。たとえば、 ホバー:divide-solid を使用して、ホバー.

<div class="divide-y divide-dashed hover:divide-solid">
  <!-- ... -->
</div>

でのみdivide-solidユーティリティを適用します。 利用可能なすべての状態修飾子の完全なリストについては、ホバー、フォーカス、その他の状態のドキュメントをご覧ください。

​ブレークポイントとメディアクエリ

バリアント修飾子を使用して、レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにすることもできます。たとえば、md:divide-solidを使用して、中画面サイズ以上でのみdivide-solidユーティリティを適用します。

<div class="divide-y divide-dashed md:divide-solid">
  <!-- ... -->
</div>

詳細については、 レスポンシブデザイン, ダークモードと その他のメディアクエリ修飾子.