【Tailwind和訳】FILTERS/Blur

この記事について

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

Blur (v2.1+)

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

Class	Properties
blur-none	--tw-blur: blur(0);
blur-sm	--tw-blur: blur(4px);
blur	--tw-blur: blur(8px);
blur-md	--tw-blur: blur(12px);
blur-lg	--tw-blur: blur(16px);
blur-xl	--tw-blur: blur(24px);
blur-2xl	--tw-blur: blur(40px);
blur-3xl	--tw-blur: blur(64px);

使い方

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

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

レスポンシブ

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

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

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

カスタマイズ

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

tailwind.config.js

  module.exports = {
    theme: {
+     extend: {
+       blur: {
+         xs: '2px',
+       }
+     }
    }
  }

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

バリアント

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

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

例えば、この設定はhoverとfocusのバリアントも生成します。

tailwind.config.js

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

無効化

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

tailwind.config.js

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