分割線の幅

​基本的な使い方

​水平方向の子要素間に境界線を追加する

`divide-x-{width}`ユーティリティを使用して、水平方向の要素間に境界線を追加します。

<div class="grid grid-cols-3 divide-x">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​スタックされた子要素間に境界線を追加する

`divide-y-{width}`ユーティリティを使用して、スタックされた要素間に境界線を追加します。

<div class="grid grid-cols-1 divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​子要素の順序を反転する

要素の順序が逆になっている場合（たとえば、`flex-row-reverse`または`flex-col-reverse`を使用している場合）、`divide-x-reverse`または`divide-y-reverse`ユーティリティを使用して、境界線が各要素の正しい側に追加されるようにします。

<div class="flex flex-col-reverse divide-y divide-y-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​条件付きで適用する

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

Tailwindでは、バリアント修飾子を使用して、異なる状態でユーティリティクラスを条件付きで適用できます。たとえば、次のように使用します。 ホバー:divide-y-8 の場合のみ`divide-y-8`ユーティリティを適用するにはホバー.

<div class="divide-y divide-gray-400 hover:divide-y-8">
  <!-- ... -->
</div>

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

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

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

<div class="divide-y divide-gray-400 md:divide-y-8">
  <!-- ... -->
</div>

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

​カスタム値の使用

​テーマのカスタマイズ

分割線の幅のスケールは、デフォルトで`borderWidth`スケールから値を継承します。そのため、境界線の幅と分割線の幅の両方の値を一緒にカスタマイズする場合は、`tailwind.config.js`ファイルの`theme.borderWidth`セクションを使用してください。

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

分割線の幅の値のみをカスタマイズするには、`tailwind.config.js`ファイルの`theme.divideWidth`セクションを使用してください。

module.exports = {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

デフォルトテーマのカスタマイズの詳細については、テーマのカスタマイズに関するドキュメントを参照してください。

​任意の値

テーマに含めるのが適切でない、一度限りの`divide-{x|y}-{width}`値を使用する必要がある場合は、角括弧を使用して、任意の値でプロパティをその場で生成します。

<div class="divide-x-[3px]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値 のドキュメントを参照してください。