ボーダーウィズ

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

Class reference

Class
Properties
.border-0border-width: 0;
.border-2border-width: 2px;
.border-4border-width: 4px;
.border-8border-width: 8px;
.borderborder-width: 1px;
.border-t-0border-top-width: 0;
.border-r-0border-right-width: 0;
.border-b-0border-bottom-width: 0;
.border-l-0border-left-width: 0;
.border-t-2border-top-width: 2px;
.border-r-2border-right-width: 2px;
.border-b-2border-bottom-width: 2px;
.border-l-2border-left-width: 2px;
.border-t-4border-top-width: 4px;
.border-r-4border-right-width: 4px;
.border-b-4border-bottom-width: 4px;
.border-l-4border-left-width: 4px;
.border-t-8border-top-width: 8px;
.border-r-8border-right-width: 8px;
.border-b-8border-bottom-width: 8px;
.border-l-8border-left-width: 8px;
.border-tborder-top-width: 1px;
.border-rborder-right-width: 1px;
.border-bborder-bottom-width: 1px;
.border-lborder-left-width: 1px;

All sides

.border,.border-0,.border-2,.border-4または.border-8ユーティリティを使用して、要素のすべての辺の境界線の幅を設定します。

.border-0

.border

.border-2

.border-4

.border-8

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

Individual sides

.border-{side},.border-{side}-0,.border-{side}-2,.border-{side}-4または.border-{side}-8ユーティリティを使用して、要素の片側の境界線の幅を設定します。

.border-t-2

.border-r-2

.border-b-2

.border-l-2

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

Between elementsv1.3.0+

divide-{x/y}-{width}およびdivide-{color}ユーティリティを使用して、子要素間に境界線を追加することもできます。

詳細はDivide WidthDivide Colorをご覧ください。

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>

レスポンシブ

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

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

<div class="border-2 sm:border-t-8 md:border-r-8 lg:border-b-8 xl:border-8">
</div>

カスタマイズ

Border Widths

デフォルトでは、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',
      }
    }
  }

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!