【Tailwind和訳】FILTERS/Drop Shadow

この記事について

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

Drop Shadow

要素にドロップシャドウフィルターを適用するためのユーティリティーです。

Class	Properties
drop-shadow-sm	--tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
drop-shadow	--tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
drop-shadow-md	--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
drop-shadow-lg	--tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
drop-shadow-xl	--tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
drop-shadow-2xl	--tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
drop-shadow-none	--tw-drop-shadow: drop-shadow(0 0 #0000);

使い方

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

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

レスポンシブ

特定のブレークポイントで要素のドロップシャドウを制御するには、既存のドロップシャドウ・ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:drop-shadow-xlを使用すると、中程度のスクリーンサイズ以上でのみdrop-shadow-xlユーティリティが適用されます。

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

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

カスタマイズ

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

tailwind.config.js

  module.exports = {
    theme: {
+     extend: {
+       dropShadow: {
+         '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
+       }
+     }
    }
  }

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

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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