ぼかし

​基本的な使い方

​要素のぼかし

blur-{amount?} ユーティリティを使用して、要素をぼかします。

blur-none

blur-sm

blur-lg

blur-2xl

<div class="blur-none ...">
  <!-- ... -->
</div>
<div class="blur-sm ...">
  <!-- ... -->
</div>
<div class="blur-lg ...">
  <!-- ... -->
</div>
<div class="blur-2xl ...">
  <!-- ... -->
</div>

​フィルターの削除

要素のすべてのフィルターを一度に削除するには、filter-noneユーティリティを使用します。

<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

これは、ホバー時や特定のブレークポイントでなど、条件付きでフィルターを削除する場合に役立ちます。

​条件付きで適用する

​ホバー、フォーカス、その他の状態

Tailwindでは、バリアント修飾子を使用して、異なる状態でユーティリティクラスを条件付きで適用できます。たとえば、 ホバー:blur-lg を使用して、blur-lg ユーティリティのみをホバー.

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

に適用します。利用可能なすべての状態修飾子の完全なリストについては、 ホバー、フォーカス、その他の状態のドキュメントをご覧ください。

​ブレークポイントとメディアクエリ

レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにするために、バリアント修飾子を使用することもできます。たとえば、md:blur-lg を使用すると、blur-lg ユーティリティが中程度の画面サイズ以上でのみ適用されます。

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

詳細については、 レスポンシブデザイン, ダークモードと その他のメディアクエリ修飾子.

に関するドキュメントをご覧ください。

​テーマのカスタマイズ

デフォルトでは、Tailwindには、汎用的なblurユーティリティがいくつか含まれています。これらの値は、tailwind.config.js ファイルの theme.blur または theme.extend.blur を編集することでカスタマイズできます。

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

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

​任意の値

テーマに含めるのが適切ではない、1回限りのblur値を使用する必要がある場合は、角かっこを使用して、任意の値を使用してプロパティをその場で生成します。

<div class="blur-[2px]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値 のドキュメントをご覧ください。