【Tailwind和訳】FILTERS/Brightness

この記事について

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

Brightness

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

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

使い方

要素の明るさをコントロールするには、filterユーティリティーと一緒に、brightness-{amount?}ユーティリティーを使用します。

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

レスポンシブ

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

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

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

カスタマイズ

tailwind.config.jsファイルのthemeセクションにあるbrightnessキーを使って、どのブライトネスユーティリティーを生成するかをカスタマイズできます。

tailwind.config.js

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

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

バリアント

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

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

例えば、この設定はホバーとフォーカスのバリアントも生成します。

tailwind.config.js

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

無効化

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

tailwind.config.js

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