【Tailwind和訳】FILTERS/Backdrop Blur

この記事について

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

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

Backdrop Blur

要素に背景のぼかしフィルターを適用するためのユーティリティ。

クラス	プロパティ
backdrop-blur-none	--tw-backdrop-blur: blur(0);
backdrop-blur-sm	--tw-backdrop-blur: blur(4px);
backdrop-blur	--tw-backdrop-blur: blur(8px);
backdrop-blur-md	--tw-backdrop-blur: blur(12px);
backdrop-blur-lg	--tw-backdrop-blur: blur(16px);
backdrop-blur-xl	--tw-backdrop-blur: blur(24px);
backdrop-blur-2xl	--tw-backdrop-blur: blur(40px);
backdrop-blur-3xl	--tw-backdrop-blur: blur(64px);

使い方

backdrop-blur-{amount?}ユーティリティーを backdrop-filter ユーティリティーと一緒に使用して、要素の背景のぼかしを制御します。

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

レスポンシブ

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

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

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

カスタマイズ

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

  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       backdropBlur: {
+         xs: '2px',
+       }
+     }
    }
  }

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

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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