スタイルを分ける

Tailwind CSS version
v1.7.0+

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

Class reference

Class
Properties
.divide-solid > * + *border-style: solid;
.divide-dashed > * + *border-style: dashed;
.divide-dotted > * + *border-style: dotted;
.divide-double > * + *border-style: double;
.divide-none > * + *border-style: none;

使用方法

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

1
2
3
<div class="divide-y-2 divide-gray-500 divide-dashed">
  <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-dashedを使用して、中程度の画面サイズ以上でのみdivide-dashedユーティリティを適用します。

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

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

カスタマイズ

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!