ボーダー不透明度

Tailwind CSS version
v1.4.0+

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

Class reference

Class
Properties
.border-opacity-0--border-opacity: 0;
.border-opacity-25--border-opacity: 0.25;
.border-opacity-50--border-opacity: 0.5;
.border-opacity-75--border-opacity: 0.75;
.border-opacity-100--border-opacity: 1;

使用方法

.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>

レスポンシブ

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

<div class="border-2 border-blue-500 border-opacity-75 md:border-opacity-50">
  <!-- ... -->
</div>

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

カスタマイズ

すべての不透明度関連ユーティリティの不透明度値を一度にカスタマイズするには、tailwind.config.jsテーマ設定のopacityセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '10': '0.1',
+         '20': '0.2',
+         '95': '0.95',
        }
      }
    }
  }

境界線の不透明度ユーティリティのみをカスタマイズする場合は、borderOpacityセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        borderOpacity: {
+         '10': '0.1',
+         '20': '0.2',
+         '95': '0.95',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはtheme customization documentationをご覧ください。

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!