【Tailwind和訳】FILTERS/Backdrop Sepia

この記事について

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

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

Backdrop Sepia

バックドロップ・セピア・フィルターを要素に適用するためのユーティリティ。

クラス	プロパティ
backdrop-sepia-0	--tw-backdrop-sepia: sepia(0);
backdrop-sepia	--tw-backdrop-sepia: sepia(1);

使用方法

backdrop-sepia および backdrop-sepia-0 ユーティリティは、要素の背景をセピア色またはフルカラーでレンダリングするかどうかを決めるために、backdrop-filter ユーティリティと一緒に使用します。

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

レスポンシブ

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

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

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

カスタマイズ

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

tailwind.config.js

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

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

バリアント

デフォルトでは、backdrop sepia ユーティリティには responsive variants のみが生成されます。

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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