【Tailwind和訳】BORDERS/Border Width

この記事について

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

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

クラスとプロパティの対応表

Class	Properties
border-0	border-width: 0px;
border-2	border-width: 2px;
border-4	border-width: 4px;
border-8	border-width: 8px;
border	border-width: 1px;
border-t-0	border-top-width: 0px;
border-t-2	border-top-width: 2px;
border-t-4	border-top-width: 4px;
border-t-8	border-top-width: 8px;
border-t	border-top-width: 1px;
border-t-0	border-right-width: 0px;
border-t-2	border-right-width: 2px;
border-t-4	border-right-width: 4px;
border-t-8	border-right-width: 8px;
border-r	border-right-width: 1px;
border-b-0	border-bottom-width: 0px;
border-b-2	border-bottom-width: 2px;
border-b-4	border-bottom-width: 4px;
border-b-8	border-bottom-width: 8px;
border-b	border-bottom-width: 1px;
border-l-0	border-left-width: 0px;
border-l-2	border-left-width: 2px;
border-l-4	border-left-width: 4px;
border-l-8	border-left-width: 8px;
border-l	border-left-width: 1px;

すべての面

border、.border-0、.border-2、.border-4、.border-8の各ユーティリティーを使用して、要素のすべての側面のボーダー幅を設定します。

<div class="border-0 border-indigo-600 ..."></div>
<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

個別のサイド

border-{side}、.border-{side}-0、.border-{side}-2、.border-{side}-4、.border-{side}-8の各ユーティリティーを使って、要素の一辺のボーダー幅を設定します。

<div class="border-t-2 border-fuchsia-600 ..."></div>
<div class="border-r-2 border-fuchsia-600 ..."></div>
<div class="border-b-2 border-fuchsia-600 ..."></div>
<div class="border-l-2 border-fuchsia-600 ..."></div>

要素間

divide-{x/y}-{width}やdivide-{color}ユーティリティーを使って、子要素の間にボーダーを追加することもできます。

詳しくは「Divide Width」と「Divide Color」のドキュメントをご覧ください。

<div class="divide-y divide-light-blue-400 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div></div>
</div>

レスポンシブ

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

<div class="border-2 md:border-t-4 ..."></div>

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

カスタマイズ

ボーダーの幅

デフォルトでは、Tailwind は 5 つのborder-widthユーティリティを提供しており、サイドごとに同じ数のユーティリティを提供しています（上、右、下、左）。これらを変更、追加、削除するには、Tailwind の設定の 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 ファイルの variants セクションにある borderWidth プロパティを変更することで、ボーダー幅のユーティリティのために生成されるバリアントをコントロールすることができます。

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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