ボーダーカラー

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

Class reference

Class
Preview 
.border-transparent
.border-current
.border-black
.border-white
.border-gray-100
.border-gray-200
.border-gray-300
.border-gray-400
.border-gray-500
.border-gray-600
.border-gray-700
.border-gray-800
.border-gray-900
.border-red-100
.border-red-200
.border-red-300
.border-red-400
.border-red-500
.border-red-600
.border-red-700
.border-red-800
.border-red-900
.border-orange-100
.border-orange-200
.border-orange-300
.border-orange-400
.border-orange-500
.border-orange-600
.border-orange-700
.border-orange-800
.border-orange-900
.border-yellow-100
.border-yellow-200
.border-yellow-300
.border-yellow-400
.border-yellow-500
.border-yellow-600
.border-yellow-700
.border-yellow-800
.border-yellow-900
.border-green-100
.border-green-200
.border-green-300
.border-green-400
.border-green-500
.border-green-600
.border-green-700
.border-green-800
.border-green-900
.border-teal-100
.border-teal-200
.border-teal-300
.border-teal-400
.border-teal-500
.border-teal-600
.border-teal-700
.border-teal-800
.border-teal-900
.border-blue-100
.border-blue-200
.border-blue-300
.border-blue-400
.border-blue-500
.border-blue-600
.border-blue-700
.border-blue-800
.border-blue-900
.border-indigo-100
.border-indigo-200
.border-indigo-300
.border-indigo-400
.border-indigo-500
.border-indigo-600
.border-indigo-700
.border-indigo-800
.border-indigo-900
.border-purple-100
.border-purple-200
.border-purple-300
.border-purple-400
.border-purple-500
.border-purple-600
.border-purple-700
.border-purple-800
.border-purple-900
.border-pink-100
.border-pink-200
.border-pink-300
.border-pink-400
.border-pink-500
.border-pink-600
.border-pink-700
.border-pink-800
.border-pink-900

使用方法

.border-{color}ユーティリティを使用して、要素の境界線の色を制御します。

<input class="border border-red-500 ...">

Changing opacityv1.4.0+

.border-opacity-{amount}ユーティリティを使用して、要素の境界線の色の不透明度を制御します。

<div class="border-blue-500 border-opacity-100"></div>
<div class="border-blue-500 border-opacity-75"></div>
<div class="border-blue-500 border-opacity-50"></div>
<div class="border-blue-500 border-opacity-25"></div>
<div class="border-blue-500 border-opacity-0"></div>

詳細はborder opacity documentationをご覧ください。

レスポンシブ

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

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

<button class="border-blue-500 sm:border-green-500 md:border-indigo-500 lg:border-red-500 xl:border-black ...">
  Button
</button>

Hover

ホバー時の要素の境界線の色を制御するには、既存の境界線の色ユーティリティに hover:プレフィックスを追加します。 たとえば、hover:border-blue-500を使用して、ホバーにborder-blue-500ユーティリティを適用します。

<button class="border-2 border-blue-500 hover:border-red-500 ...">
  Button
</button>

ホバーユーティリティは、レスポンシブ {screen}:プレフィックスを focus:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

<button class="... md:border-blue-500 md:hover:border-blue-700 ...">Button</button>

Focus

フォーカスされている要素の境界線の色を制御するには、既存の境界線の色ユーティリティにfocus:プレフィックスを追加します。たとえば、focus:border-blue-500を使用して、border-blue-500ユーティリティをフォーカスに適用します。

<input class="border-gray-400 focus:border-blue-500 ...">

フォーカスユーティリティは、レスポンシブ{screen}:プレフィックスをfocus:プレフィックスの に追加することで、レスポンシブユーティリティと組み合わせることもできます。

<input class="... md:border-gray-200 md:focus:border-white ...">

カスタマイズ

ボーダーカラー

デフォルトでは、Tailwindはdefault color paletteを境界線の色として使用できるようにします。

tailwind.config.jsファイルのtheme.colorsセクションを編集してカラーパレットをカスタマイズするか、theme.borderColorセクションを使用して境界線の色だけをカスタマイズできます。

  // tailwind.config.js
  module.exports = {
    theme: {
      borderColor: theme => ({
-       ...theme('colors'),
        default: theme('colors.gray.300', 'currentColor'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!