【Tailwind和訳】FILTERS/Backdrop Brightness

この記事について

この記事は、FILTERS/Backdrop Brightnessの記事を和訳したものです。

Backdrop Brightness

要素に背景の明るさのフィルターを適用するためのユーティリティ。

Class	Properties
backdrop-brightness-0	--tw-backdrop-brightness: brightness(0);
backdrop-brightness-50	--tw-backdrop-brightness: brightness(.5);
backdrop-brightness-75	--tw-backdrop-brightness: brightness(.75);
backdrop-brightness-90	--tw-backdrop-brightness: brightness(.9);
backdrop-brightness-95	--tw-backdrop-brightness: brightness(.95);
backdrop-brightness-100	--tw-backdrop-brightness: brightness(1);
backdrop-brightness-105	--tw-backdrop-brightness: brightness(1.05);
backdrop-brightness-110	--tw-backdrop-brightness: brightness(1.1);
backdrop-brightness-125	--tw-backdrop-brightness: brightness(1.25);
backdrop-brightness-150	--tw-backdrop-brightness: brightness(1.5);
backdrop-brightness-200	--tw-backdrop-brightness: brightness(2);

使い方

要素の背景の明るさを制御するには、backdrop-filterユーティリティと一緒にbackdrop-brightness-{amount?}ユーティリティを使用します。

<div class="backdrop-filter backdrop-brightness-125 ...">
  <!-- ... -->
</div>

レスポンシブ

特定のブレークポイントで要素の背景の明るさを制御するには、既存のバックドロップブライトネスユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:backdrop-brightness-150を使うと、中程度のスクリーンサイズ以上でのみbackdrop-brightness-150ユーティリティを適用することができます。

<div class="backdrop-filter backdrop-brightness-110 md:backdrop-brightness-150 ...">
  <!-- ... -->
</div>

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

カスタマイズ

tailwind.config.jsファイルのthemeセクションにあるbackdropBrightnessキーを使って、どのbackdrop-brightnessユーティリティが生成されるかをカスタマイズすることができます。

tailwind.config.js

  module.exports = {
    theme: {
+     extend: {
+       backdropBrightness: {
+         25: '.25',
+         175: '1.75',
+       }
+     }
    }
  }

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

バリアント

デフォルトでは、バックドロップブライトネスユーティリティのために、レスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるbackdropBrightnessプロパティを変更することで、バックドロップブライトネスユーティリティのために生成されるバリアントを制御することができます。

例えば、このコンフィグはhoverとfocusのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       backdropBrightness: ['hover', 'focus'],
      }
    }
  }

無効化

バックドロップブライトネスユーティリティをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでbackdropBrightnessプロパティをfalseに設定することで、ユーティリティを完全に無効にすることができます。

tailwind.config.js

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