【Tailwind和訳】BORDERS/Border Style

この記事について

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

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

Border Style

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

クラス	プロパティ
border-solid	border-style: solid;
border-dashed	border-style: dashed;
border-dotted	border-style: dotted;
border-double	border-style: double;
border-none	border-style: none;

使い方

要素の境界線のスタイルを制御するには、border-{style}を使用します。

<div class="border-solid border-4 border-light-blue-500 ..."></div>
<div class="border-dashed border-4 border-light-blue-500 ..."></div>
<div class="border-dotted border-4 border-light-blue-500 ..."></div>
<div class="border-double border-4 border-light-blue-500 ..."></div>
<div class="border-none border-4 border-light-blue-500 ..."></div>

レスポンシブ

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

<div class="border-solid md:border-dotted ..."></div>

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

カスタマイズ

バリアント

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

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

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

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

無効化

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

tailwind.config.js

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