【Tailwind和訳】FILTERS/Filter

この記事について

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

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

Filter (v2.1+)

エレメントのフィルタを有効にしたり無効にしたりするユーティリティ。

クラス	プロパティ
filter	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter-none	filter: none;

使い方

フィルターを有効にするには filter ユーティリティーを、フィルターを削除するには filter-none ユーティリティーを使用しますblur や grayscale などの他のフィルターユーティリティーとの組み合わせ。

<div class="filter grayscale blur-md contrast-200 ...">
  <!-- ... -->
</div>

レスポンシブ

特定のブレイクポイントでフィルターを制御するには、既存のフィルターユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:filter-none を使うと、中程度のスクリーンサイズ以上でのみ filter-none ユーティリティを適用できます。

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

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

カスタマイズ

バリアント

デフォルトでは、レスポンシブバリアントのみがフィルターユーティリティー用に生成されます。

tailwind.config.js ファイルの variants セクションにある filter プロパティを変更することで、フィルターユーティリティー用に生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

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

無効化

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

tailwind.config.js

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