【Tailwind和訳】EFFECTS/Box Shadow

この記事について

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

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

Box Shadow

要素のボックスシャドウを制御するためのユーティリティーです。

クラス	プロパティ
::before, ::after	--tw-shadow: 0 0 #0000;
shadow-sm	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow	・--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-md	・--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-lg	・--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-xl	・--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-2xl	・--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-inner	・--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
shadow-none	・--tw-shadow: 0 0 #0000; ・box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

外側の影

異なるサイズのアウターボックスシャドウを要素に適用するには、shadow-sm、shadow、shadow-md、shadow-lg、shadow-xl、shadow-2xl の各ユーティリティを使用します。

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

内側の影

shadow-innerユーティリティーを使って、要素に微妙なインセットボックスシャドウを適用します。これは、フォームコントロールや井戸のようなものに便利です。

<div class="shadow-inner ..."></div>

影なし

既存のボックスシャドウを要素から削除するには、shadow-none を使用します。これは、小さいブレークポイントで適用されたシャドウを削除するために最もよく使用されます。

<div class="shadow-none ..."></div>

レスポンシブ

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

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

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

カスタマイズ

ボックスシャドウ

デフォルトでは、テイルウィンドは 6 つのドロップシャドウユーティリティー、1 つのインナーシャドウユーティリティー、そして既存のシャドウを削除するユーティリティーを提供します。これらを変更、追加、削除するには、Tailwind 設定の theme.boxShadow セクションを編集します。

DEFAULT シャドウが指定された場合、それはサフィックスのないshadow・ユーティリティに使用されます。その他のキーは接尾語として使用され、たとえばキー「2」は対応する shadow-2 ユーティリティを作成します。

tailwind.config.js

  module.exports = {
    theme: {
      boxShadow: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+       '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
        none: 'none',
      }
    }
  }

バリアント

デフォルトでは、レスポンシブ、グループホバー、フォーカスウィズイン、ホバー、フォーカスの各バリアントのみがボックスシャドウユーティリティ用に生成されます。

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

例えば、このコンフィグはアクティブなバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       boxShadow: ['active'],
      }
    }
  }

無効化

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

tailwind.config.js

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