【Tailwind和訳】BACKGROUNDS/Background Opacity

この記事について

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

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

Background Opacity

要素の背景色の不透明度をコントロールするためのユーティリティーです。

Class	Properties
bg-opacity-0	--tw-bg-opacity: 0;
bg-opacity-5	--tw-bg-opacity: 0.05;
bg-opacity-10	--tw-bg-opacity: 0.1;
bg-opacity-20	--tw-bg-opacity: 0.2;
bg-opacity-25	--tw-bg-opacity: 0.25;
bg-opacity-30	--tw-bg-opacity: 0.3;
bg-opacity-40	--tw-bg-opacity: 0.4;
bg-opacity-50	--tw-bg-opacity: 0.5;
bg-opacity-60	--tw-bg-opacity: 0.6;
bg-opacity-70	--tw-bg-opacity: 0.7;
bg-opacity-75	--tw-bg-opacity: 0.75;
bg-opacity-80	--tw-bg-opacity: 0.8;
bg-opacity-90	--tw-bg-opacity: 0.9;
bg-opacity-95	--tw-bg-opacity: 0.95;
bg-opacity-100	--tw-bg-opacity: 1;

使い方

bg-opacity-{amount}ユーティリティを使って、要素の背景色の不透明度を制御します。

<div class="bg-indigo-600 bg-opacity-100 ..."></div>
<div class="bg-indigo-600 bg-opacity-75 ..."></div>
<div class="bg-indigo-600 bg-opacity-50 ..."></div>
<div class="bg-indigo-600 bg-opacity-25 ..."></div>
<div class="bg-indigo-600 bg-opacity-0 ..."></div>

レスポンシブ

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

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

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

カスタマイズ

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

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '15': '0.15',
+         '35': '0.35',
+         '65': '0.65',
        }
      }
    }
  }

背景の不透明度のユーティリティーだけをカスタマイズしたい場合は、backgroundOpacityセクションを使用します。

tailwind.config.js

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

デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントで詳しく説明しています。

バリアント

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

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

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

tailwind.config.js

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

無効化

背景透過ユーティリティをプロジェクトで使用する予定がない場合、設定ファイルのcorePluginsセクションでbackgroundOpacityプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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