グレースケール

​基本的な使い方

​要素をグレースケールにする

要素をグレースケールでレンダリングするか、フルカラーでレンダリングするかを制御するには、grayscale および grayscale-0 ユーティリティを使用します。

grayscale-0

grayscale

<div class="grayscale-0 ...">
  <!-- ... -->
</div>
<div class="grayscale ...">
  <!-- ... -->
</div>

​フィルターの削除

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

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

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

​条件付きの適用

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

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

<div class="grayscale hover:grayscale-0">
  <!-- ... -->
</div>

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

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

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

<div class="grayscale md:grayscale-0">
  <!-- ... -->
</div>

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

​カスタム値の使用

​テーマのカスタマイズ

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

module.exports = {
  theme: {
    extend: {
      grayscale: {
        50: '50%',
      }
    }
  }
}

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

​任意の値

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

<div class="grayscale-[50%]">
  <!-- ... -->
</div>

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