【Tailwind和訳】BORDERS/Divide Style

この記事について

この記事は、BORDERS/Divide Styleの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

ディバイドスタイル

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

クラス	プロパティ
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}ユーティリティーを使って、要素間のボーダースタイルを制御します。

<div class="divide-y-4 divide-yellow-600 divide-dashed">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

レスポンシブ

特定のブレイクポイントにおける要素間のボーダー・スタイルを制御するには、既存の divide スタイル・ユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:divide-dashedを使用すると、中程度の画面サイズ以上にのみdivide-dashedユーティリティが適用されます。

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

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

カスタマイズ

バリアント

デフォルトでは、ディバイドスタイルのユーティリティーでは、レスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるdivideStyleプロパティを変更することで、どのバリアントが divide スタイルのユーティリティー用に生成されるかをコントロールすることができます。

例えば、この config は hover と focus のバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       divideStyle: ['hover', 'focus'],
      }
    }
  }

無効化

もし、プロジェクトでディバイドスタイルのユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでdivideStyleプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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