🕶

【Tailwind和訳】FILTERS/Backdrop Contrast

2021/10/25に公開

この記事について

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

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

Backdrop Contrast (v2.1+)

要素に背景のコントラストフィルターを適用するユーティリティーです。

Class Properties
backdrop-contrast-0 --tw-backdrop-contrast: contrast(0);
backdrop-contrast-50 --tw-backdrop-contrast: contrast(.5);
backdrop-contrast-75 --tw-backdrop-contrast: contrast(.75);
backdrop-contrast-100 --tw-backdrop-contrast: contrast(1);
backdrop-contrast-125 --tw-backdrop-contrast: contrast(1.25);
backdrop-contrast-150 --tw-backdrop-contrast: contrast(1.5);
backdrop-contrast-200 --tw-backdrop-contrast: contrast(2);

使い方

backdrop-contrast-{amount?}ユーティリティーを backdrop-filter ユーティリティーと一緒に使用して、要素の背景のコントラストを制御します。

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

レスポンシブ

特定のブレークポイントで要素の背景コントラストを制御するには、既存の背景コントラストユーティリティーに {screen}: というプレフィックスを追加します。例えば、md:backdrop-contrast-150 を使うと、中程度の画面サイズ以上でのみ backdrop-contrast-150 ユーティリティを適用することができます。

<div class="backdrop-filter backdrop-contrast-110 md:backdrop-contrast-150 ...">
  <!-- ... -->
</div>

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

カスタマイズ

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

tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       backdropContrast: {
+         25: '.25',
+       }
+     }
    }
  }

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

背景のコントラストのスケール

Tailwind のコンフィグで、backdrop-contrastフィルターの値をカスタマイズすることができます。

tailwind.config.js
  module.exports = {
    theme: {
      backdropContrast: {
        0: '0',
+       25: '.25',
        50: '.5',
        75: '.75',
        100: '1',
        125: '1.25',
        150: '1.5',
        200: '2',
      }
    }
  }

バリアント

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

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

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

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       backdropContrast: ['hover', 'focus'],
      }
    }
  }

無効化

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

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backdropContrast: false,
    }
  }

Discussion

ログインするとコメントできます