🕶

【Tailwind和訳】FILTERS/Backdrop Hue Rotate

2021/10/25に公開約3,000字

この記事について

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

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

Backdrop Hue Rotate

要素に背景色相回転フィルタを適用するためのユーティリティ。

Class Properties
-backdrop-hue-rotate-180 --tw-backdrop-hue-rotate: hue-rotate(-180deg);
-backdrop-hue-rotate-90 --tw-backdrop-hue-rotate: hue-rotate(-90deg);
-backdrop-hue-rotate-60 --tw-backdrop-hue-rotate: hue-rotate(-60deg);
-backdrop-hue-rotate-30 --tw-backdrop-hue-rotate: hue-rotate(-30deg);
-backdrop-hue-rotate-15 --tw-backdrop-hue-rotate: hue-rotate(-15deg);
backdrop-hue-rotate-0 --tw-backdrop-hue-rotate: hue-rotate(0deg);
backdrop-hue-rotate-15 --tw-backdrop-hue-rotate: hue-rotate(15deg);
backdrop-hue-rotate-30 --tw-backdrop-hue-rotate: hue-rotate(30deg);
backdrop-hue-rotate-60 --tw-backdrop-hue-rotate: hue-rotate(60deg);
backdrop-hue-rotate-90 --tw-backdrop-hue-rotate: hue-rotate(90deg);
backdrop-hue-rotate-180 --tw-backdrop-hue-rotate: hue-rotate(180deg);

使い方

要素をぼかすには、backdrop-filter ユーティリティーと一緒に、backdrop-hue-rotate-{amount}ユーティリティーを使います。

<div class="backdrop-filter backdrop-hue-rotate-15 ...">
  <!-- ... -->
</div>

レスポンシブ

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

<div class="backdrop-filter backdrop-hue-rotate-15 md:backdrop-hue-rotate-60 ...">
  <!-- ... -->
</div>

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

カスタマイズ

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

tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       backdropHueRotate: {
+         '-270': '-270deg',
+         270: '270deg',
+       }
+     }
    }
  }

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

バリアント

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

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

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

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

無効化

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

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

Discussion

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