ドロップシャドウ

​基本的な使い方

​ドロップシャドウの追加

要素にドロップシャドウを追加するには、drop-shadow-{amount}ユーティリティを使用します。

<div class="drop-shadow-md ...">
  <!-- ... -->
</div>
<div class="drop-shadow-lg ...">
  <!-- ... -->
</div>
<div class="drop-shadow-xl ...">
  <!-- ... -->
</div>
<div class="drop-shadow-2xl ...">
  <!-- ... -->
</div>

これは、テキストやSVG要素のような不規則な形状に影を適用するのに便利です。通常の要素に影を適用する場合は、代わりにボックスシャドウを使用することをお勧めします。

​フィルターの削除

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

<div class="blur-md invert drop-shadow-xl md:filter-none">
  <!-- ... -->
</div>

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

​条件付きで適用

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

Tailwindを使用すると、バリアントモディファイアを使用して、さまざまな状態でユーティリティクラスを条件付きで適用できます。たとえば、以下を使用してください hover:drop-shadow-xl drop-shadow-xlユーティリティを適用する場合のみhover.

<div class="drop-shadow-md hover:drop-shadow-xl">
  <!-- ... -->
</div>

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

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

バリアントモディファイアを使用して、レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにすることもできます。たとえば、md:drop-shadow-xlを使用して、中程度の画面サイズ以上でのみdrop-shadow-xlユーティリティを適用します。

<div class="drop-shadow-md md:drop-shadow-xl">
  <!-- ... -->
</div>

詳細については、ドキュメントで確認してください レスポンシブデザイン, ダークモードと その他のメディアクエリ修飾子.

​カスタム値の使用

​テーマのカスタマイズ

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

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        '4xl': [
            '0 35px 35px rgba(0, 0, 0, 0.25)',
            '0 45px 65px rgba(0, 0, 0, 0.15)'
        ]
      }
    }
  }
}

テーマのカスタマイズドキュメントで、デフォルトテーマのカスタマイズについて詳しく学ぶことができます。

​任意の値を指定

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

<div class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]">
  <!-- ... -->
</div>

テーマのカスタマイズドキュメントで、任意の値のサポートについて詳しく学ぶことができます。 任意の値 ドキュメントを参照してください。