ボーダースタイル

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

Class reference

Class
Properties
.border-solidborder-style: solid;
.border-dashedborder-style: dashed;
.border-dottedborder-style: dotted;
.border-doubleborder-style: double;
.border-noneborder-style: none;

使用方法

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

.border-solid

.border-dashed

.border-dotted

.border-double

.border-none

<div class="border-solid border-4 border-gray-600 ..."></div>
<div class="border-dashed border-4 border-gray-600 ..."></div>
<div class="border-dotted border-4 border-gray-600 ..."></div>
<div class="border-double border-4 border-gray-600 ..."></div>
<div class="border-none border-4 border-gray-600 ..."></div>

レスポンシブ

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

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

<div class="border-solid sm:border-dashed md:border-dotted lg:border-double xl:border-none">
</div>

カスタマイズ

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!