幅を分ける

Tailwind CSS version
v1.3.0+

要素間の境界線の幅を制御するためのユーティリティ。

Class reference

Class
Properties
.divide-y-0 > * + *border-top-width: 0;
.divide-x-0 > * + *border-left-width: 0;
.divide-y-2 > * + *border-top-width: 2px;
.divide-x-2 > * + *border-left-width: 2px;
.divide-y-4 > * + *border-top-width: 4px;
.divide-x-4 > * + *border-left-width: 4px;
.divide-y-8 > * + *border-top-width: 8px;
.divide-x-8 > * + *border-left-width: 8px;
.divide-y > * + *border-top-width: 1px;
.divide-x > * + *border-left-width: 1px;
.divide-y-reverse > * + *--divide-y-reverse: 1;
.divide-x-reverse > * + *--divide-x-reverse: 1;

Add borders between horizontal children

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

1
2
3
<div class="grid grid-cols-3 divide-x divide-gray-400">
  <div class="text-center">1</div>
  <div class="text-center">2</div>
  <div class="text-center">3</div>
</div>

Add borders between stacked children

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

1
2
3
<div class="divide-y divide-gray-400">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>

Reversing children order

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

1
2
3
<div class="flex flex-col-reverse divide-y divide-y-reverse divide-gray-400">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>

Responsive

特定のブレークポイントで要素間の境界を制御するには、既存の除算ユーティリティに {screen}:プレフィックスを追加します。 たとえば、クラスmd:divide-x-8を要素に追加すると、中程度の画面サイズ以上でdivide-x-8ユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="divide-y sm:divide-y-2 md:divide-y-4 lg:divide-y-8 xl:divide-y-0 divide-gray-400">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>
1
2
3

カスタマイズ

Divide width scale

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

  // tailwind.config.js
  module.exports = {
    theme: {
      borderWidth: {
        default: '1px',
        '0': '0',
        '2': '2px',
+       '3': '3px',
        '4': '4px',
+       '6': '6px',
-       '8': '8px',
      }
    }
  }

分割幅の値のみをカスタマイズするにはtailwind.config.jsファイルのtheme.divideWidthセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      divideWidth: {
        default: '1px',
        '0': '0',
        '2': '2px',
+       '3': '3px',
        '4': '4px',
+       '6': '6px',
-       '8': '8px',
      }
    }
  }

デフォルトテーマのカスタマイズについてはtheme customization documentationをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはdivide width utilitiesのために作られます。

あなたはどのバリアントがdivide width utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのdivideWidthプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     divideWidth: ['responsive'],
+     divideWidth: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしdivide width utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのdivideWidth propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     divideWidth: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!