輝度

​基本的な使い方

​要素の明るさの変更

brightness-{amount?}ユーティリティを使用して、要素の明るさを制御します。

brightness-50

brightness-100

brightness-125

brightness-200

<div class="brightness-50 ...">
  <!-- ... -->
</div>
<div class="brightness-100 ...">
  <!-- ... -->
</div>
<div class="brightness-125 ...">
  <!-- ... -->
</div>
<div class="brightness-200 ...">
  <!-- ... -->
</div>

​フィルターの削除

要素のすべてのフィルターを一度に削除するには、filter-noneユーティリティを使用します。

<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

これは、ホバー時や特定のブレークポイントなどで、条件付きでフィルターを削除する場合に役立ちます。

​条件付きで適用する

​ホバー、フォーカス、その他の状態

Tailwindでは、バリアント修飾子を使用して、異なる状態でユーティリティクラスを条件付きで適用できます。たとえば、 ホバー:brightness-150 を使用して、brightness-150ユーティリティをホバー.

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

にのみ適用します 利用可能なすべての状態修飾子の完全なリストについては、ホバー、フォーカス、およびその他の状態のドキュメントを参照してください。

​ブレークポイントとメディアクエリ

バリアント修飾子を使用して、レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにすることもできます。たとえば、md:brightness-150を使用して、brightness-150ユーティリティを中画面サイズ以上でのみ適用します。

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

詳細については、 レスポンシブデザイン, ダークモードと その他のメディアクエリ修飾子.

に関するドキュメントを参照してください。

​カスタム値の使用

デフォルトでは、Tailwindには汎用的なbrightnessユーティリティがいくつか含まれています。これらの値は、tailwind.config.jsファイルのtheme.brightnessまたはtheme.extend.brightnessを編集することでカスタマイズできます。

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

デフォルトテーマのカスタマイズの詳細については、テーマのカスタマイズドキュメントを参照してください。

​任意の値

テーマに含めるのが理にかなわない、1回限りのbrightness値を使用する必要がある場合は、角かっこを使用して、任意の値を使用してプロパティをその場で生成します。

<div class="brightness-[1.75]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値 ドキュメント