ボックスシャドウ

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

Class reference

Class
Properties
.shadow-xsbox-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
.shadow-smbox-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
.shadowbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.shadow-mdbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
.shadow-lgbox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
.shadow-xlbox-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
.shadow-2xlbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
.shadow-outlinebox-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
.shadow-nonebox-shadow: none;

Outer shadow

.shadow-xs,.shadow-sm,.shadow,.shadow-md,.shadow-lg,.shadow-xlまたは.shadow-2xlユーティリティを使用します。 異なるサイズのボックス外の影を要素に適用します。

xs
sm
base
md
lg
xl
2xl
<div class="shadow-xs"></div>
<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>

Inner shadow

.shadow-innerユーティリティを使用して、要素に微かなはめ込みボックスの影を適用します。 これは、フォームコントロールやwellsなどに役立ちます。

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

Focus outline shadow

.shadow-outlineユーティリティを使用して、フォーカスリングスタイルのシャドウを要素に適用します。 これは、.focus:outline-noneと組み合わせて、要素の境界半径に沿った見栄えの良いフォーカススタイルを作成するときに役立ちます。

<button class="focus:outline-none focus:shadow-outline ...">
  Button
</button>

No shadow

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

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

レスポンシブ

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

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

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

カスタマイズ

Box Shadows

デフォルトでは、Tailwindは、3つのドロップシャドウユーティリティ、1つの内部シャドウユーティリティ、および既存のシャドウを削除するためのユーティリティを提供します。 Tailwindコンフィグのtheme.boxShadowセクションを編集することで、これらを変更、追加、または削除できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      boxShadow: {
        xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
        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)',
-       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+       focus: '0 0 0 3px rgba(66, 153, 225, 0.5)',
        none: 'none',
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive, hover and focus バリアントはbox shadow utilitiesのために作られます。

あなたはどのバリアントがbox shadow utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのboxShadowプロパティを修正することによってコントロールできます。

例として、この設定は also active and group-hover バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     boxShadow: ['responsive', 'hover', 'focus'],
+     boxShadow: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    }
  }

機能を使用しない場合

もしbox shadow utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのboxShadow propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!