【Tailwind和訳】BORDERS/Border Opacity

この記事について

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

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

Border Opacity

要素のボーダーカラーの不透明度をコントロールするためのユーティリティーです。

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

クラス	プロパティ
border-opacity-0	--tw-border-opacity: 0;
border-opacity-5	--tw-border-opacity: 0.05;
border-opacity-10	--tw-border-opacity: 0.1;
border-opacity-20	--tw-border-opacity: 0.2;
border-opacity-25	--tw-border-opacity: 0.25;
border-opacity-30	--tw-border-opacity: 0.3;
border-opacity-40	--tw-border-opacity: 0.4;
border-opacity-50	--tw-border-opacity: 0.5;
border-opacity-60	--tw-border-opacity: 0.6;
border-opacity-70	--tw-border-opacity: 0.7;
border-opacity-75	--tw-border-opacity: 0.75;
border-opacity-80	--tw-border-opacity: 0.8;
border-opacity-90	--tw-border-opacity: 0.9;
border-opacity-95	--tw-border-opacity: 0.95;
border-opacity-100	--tw-border-opacity: 1;

使い方

border-opacity-{amount} ユーティリティーを使って、要素のボーダーカラーの不透明度を制御します。

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

レスポンシブ

特定のブレークポイントで要素のボーダーカラーの不透明度を制御するには、既存のボーダーカラーの不透明度ユーティリティーに {screen}: というプレフィックスを追加します。例えば、md:border-opacity-50 を使うと、medium スクリーンサイズ以上でのみ border-opacity-50 ユーティリティが適用されます。

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

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

カスタマイズ

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

tailwind.config.js

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

ボーダーの不透明度のユーティリティーだけをカスタマイズしたい場合は、 fborderOpacity セクションを使用してください。

tailwind.config.js

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

デフォルトのテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、レスポンシブ、ダークモード（有効な場合）、group-hover、focus-within、hover、focus の各バリアントのみが、ボーダーの不透明度のユーティリティー用に生成されます。

tailwind.config.js ファイルの variants セクションにある borderOpacity プロパティを変更することで、ボーダーオパシティユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この config はアクティブなバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       borderOpacity: ['active'],
      }
    }
  }

無効化

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

tailwind.config.js

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