🪄

【Tailwind和訳】EFFECTS/Opacity

2021/10/24に公開約2,700字

この記事について

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

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

Opacity

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

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

使い方

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

Image from Gyazo

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

レスポンシブ

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

<div class="opacity-100 md:opacity-50 ...">
  <!-- ... -->
</div>

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

カスタマイズ

不透明度のスケール

デフォルトでは、Tailwind はシンプルな数値スケールに基づいた 5 つの不透明度のユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind の設定の theme.opacity セクションを編集します。

tailwind.config.js
  module.exports = {
    theme: {
      opacity: {
        '0': '0',
-       '25': '.25',
-       '50': '.5',
-       '75': '.75',
+       '10': '.1',
+       '20': '.2',
+       '30': '.3',
+       '40': '.4',
+       '50': '.5',
+       '60': '.6',
+       '70': '.7',
+       '80': '.8',
+       '90': '.9',
        '100': '1',
      }
    }
  }

バリアント

デフォルトでは、レスポンシブ、group-hover、focus-within、hover、focus の各バリアントのみが不透明度ユーティリティのために生成されます。

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

例えば、この設定では、アクティブなバリアントも生成されます。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       opacity: ['active'],
      }
    }
  }

無効化

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

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

Discussion

ログインするとコメントできます