【Tailwind和訳】FILTERS/Backdrop Grayscale

この記事について

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

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Backdrop Grayscale

要素にバックドロップ・グレースケール・フィルターを適用するユーティリティー。

Class	Properties
backdrop-grayscale-0	--tw-backdrop-grayscale: grayscale(0);
backdrop-grayscale	--tw-backdrop-grayscale: grayscale(1);

使い方

backdrop-grayscale と backdrop-grayscale-0 ユーティリティを backdrop-filter ユーティリティと一緒に使用して、要素の背景をグレースケールまたはフルカラーでレンダリングするかどうかを指定します。

<div class="backdrop-filter backdrop-grayscale ...">
  <!-- ... -->
</div>

レスポンシブ

特定のブレークポイントで要素の背景グレースケール・フィルターを制御するには、既存の背景グレースケール・ユーティリティーに {screen}: というプレフィックスを追加します。例えば、md:backdrop-grayscale-0 を使用して、medium スクリーンサイズ以上でのみ backdrop-grayscale-0 ユーティリティを適用します。

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

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

カスタマイズ

tailwind.config.js ファイルの theme セクションにある backdropGrayscale キーを使って、どの backdrop-grayscale ユーティリティが生成されるかをカスタマイズすることができます。

tailwind.config.js

  module.exports = {
    theme: {
+     extend: {
+       backdropGrayscale: {
+         50: '.5',
+       }
+     }
    }
  }

デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントで詳しく説明しています。

バリアント

デフォルトでは、バックドロップグレイスケールユーティリティにはレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある backdropGrayscale プロパティを変更することで、backdrop-grayscaleユーティリティのために生成されるバリアントを制御することができます。

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

tailwind.config.js

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

無効化

プロジェクトで背景グレースケールユーティリティを使用する予定がない場合は、設定ファイルの corePlugins セクションで backdropGrayscale プロパティを false に設定することで、完全に無効化することができます。

tailwind.config.js

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