彩度

​基本的な使用方法

​要素の彩度を変更する

要素の彩度を制御するには、saturate-{amount} ユーティリティを使用します。

saturate-50

saturate-100

saturate-150

saturate-200

<div class="saturate-50 ...">
  <!-- ... -->
</div>
<div class="saturate-100 ...">
  <!-- ... -->
</div>
<div class="saturate-150 ...">
  <!-- ... -->
</div>
<div class="saturate-200 ...">
  <!-- ... -->
</div>

​フィルターの削除

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

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

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

​条件付きで適用する

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

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

<div class="saturate-50 hover:saturate-150">
  <!-- ... -->
</div>

で使用できるすべての状態修飾子の完全なリストについては、 ホバー、フォーカス、その他の状態 ドキュメントをご覧ください。

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

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

<div class="saturate-50 md:saturate-150">
  <!-- ... -->
</div>

詳細については、 レスポンシブデザイン, ダークモード および その他のメディアクエリ修飾子のドキュメントをご覧ください。.

​カスタム値を使用する

​テーマのカスタマイズ

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

module.exports = {
  theme: {
    extend: {
      saturate: {
        25: '.25',
        75: '.75',
      }
    }
  }
}

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

​任意の値

一意のsaturate値を使用する必要がある場合テーマに含めるのが適切でない場合は、角括弧を使用して、任意の値を使用してプロパティをオンザフライで生成します。

<div class="saturate-[.25]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値 ドキュメントを参照してください。