コントラスト

​基本的な使い方

​要素のコントラストを変更する

要素のコントラストを制御するには、contrast-{amount?}ユーティリティを使用します。

contrast-50

contrast-100

contrast-125

contrast-200

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

​フィルターを削除する

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

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

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

​条件付きで適用する

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

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

<div class="contrast-125 hover:contrast-150">
  <!-- ... -->
</div>

利用可能なすべての状態修飾子の完全なリストについては、以下を確認してください ホバー、フォーカス、その他の状態ドキュメント。

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

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

<div class="contrast-125 md:contrast-150">
  <!-- ... -->
</div>

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

​カスタム値を使用する

​テーマのカスタマイズ

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

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

テーマのカスタマイズドキュメントで、デフォルトテーマのカスタマイズについて詳しく学んでください。

​任意の値

テーマに含めることが適切ではない1回限りの contrast 値を使用する必要がある場合は角括弧を使用して、任意の値を使い、その場でプロパティを生成できます。

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

任意の値のサポートについては、 任意の値 ドキュメントで詳しく学んでください。