box-shadow

例

基本的な例

shadow-sm や shadow-lg のようなユーティリティを使用して、要素に異なるサイズの外側のボックスシャドウを適用します。

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

不透明度の変更

不透明度修飾子を使用して、ボックスシャドウの不透明度を調整します。

<div class="shadow-xl ..."></div>
<div class="shadow-xl/20 ..."></div>
<div class="shadow-xl/30 ..."></div>

デフォルトのボックスシャドウの不透明度は非常に低く（25％以下）、不透明度を上げると（50％など）、ボックスシャドウがより顕著になります。

シャドウカラーの設定

shadow-indigo-500 や shadow-cyan-500/50 のようなユーティリティを使用して、ボックスシャドウの色を変更します。

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

デフォルトでは、色付きシャドウの不透明度は100％ですが、不透明度修飾子を使用してこれを調整できます。

インセットシャドウの追加

inset-shadow-xs や inset-shadow-sm のようなユーティリティを使用して、要素に内側のボックスシャドウを適用します。

<div class="inset-shadow-2xs ..."></div>
<div class="inset-shadow-xs ..."></div>
<div class="inset-shadow-sm ..."></div>

inset-shadow-sm/50 のように、不透明度修飾子を使用してインセットシャドウの不透明度を調整できます。デフォルトのインセットシャドウの不透明度は非常に低く（5％）、不透明度を上げると（50％など）、インセットシャドウがより顕著になります。

インセットシャドウカラーの設定

inset-shadow-indigo-500 や inset-shadow-cyan-500/50 のようなユーティリティを使用して、インセットボックスシャドウの色を変更します。

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div>
<div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

デフォルトでは、色付きシャドウの不透明度は100％ですが、不透明度修飾子を使用してこれを調整できます。

リングの追加

ring または ring-<number> ユーティリティ（ring-2 や ring-4 など）を使用して、要素にソリッドなボックスシャドウを適用します。

<button class="ring ...">Subscribe</button>
<button class="ring-2 ...">Subscribe</button>
<button class="ring-4 ...">Subscribe</button>

デフォルトでは、リングは適用されている要素の currentColor に一致します。

リングカラーの設定

ring-indigo-500 や ring-cyan-500/50 のようなユーティリティを使用して、リングの色を変更します。

<button class="ring-2 ring-blue-500 ...">Subscribe</button>
<button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

デフォルトでは、リングの不透明度は100％ですが、不透明度修飾子を使用してこれを調整できます。

インセットリングの追加

inset-ring または inset-ring-<number> ユーティリティ（inset-ring-2 や inset-ring-4 など）を使用して、要素にソリッドなインセットボックスシャドウを適用します。

<button class="inset-ring ...">Subscribe</button>
<button class="inset-ring-2 ...">Subscribe</button>
<button class="inset-ring-4 ...">Subscribe</button>

デフォルトでは、インセットリングは適用されている要素の currentColor に一致します。

インセットリングカラーの設定

inset-ring-indigo-500 や inset-ring-cyan-500/50 のようなユーティリティを使用して、インセットリングの色を変更します。

<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button>
<button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

デフォルトでは、インセットリングの不透明度は100％ですが、不透明度修飾子を使用してこれを調整できます。

ボックスシャドウの削除

shadow-none、inset-shadow-none、ring-0、および inset-ring-0 ユーティリティを使用して、要素から既存のボックスシャドウを削除します。

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

カスタム値の使用

次のようなユーティリティを使用します: shadow-[<value>]、inset-shadow-[<value>]、ring-[<value>]、および inset-ring-[<value>]を設定するにはボックスシャドウ完全にカスタムの値に基づいて

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

CSS変数については、以下も使用できます。 shadow-(<custom-property>) 構文

<div class="shadow-(--my-shadow) ...">
  <!-- ... -->
</div>

これは単に shadow-[var(<custom-property>)] の短縮形であり、var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa box-shadow ユーティリティ md: のようなブレークポイントバリアントをプレフィックスとして付けて、ユーティリティを適用するのはmedium スクリーンサイズ以上の場合のみにします。

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

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

シャドウのカスタマイズ

--shadow-* テーマ変数を使用して、以下をカスタマイズします。ボックスシャドウ プロジェクトのユーティリティ

@theme {
  --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); 
}

これで shadow-3xl ユーティリティをマークアップで使用できます

<div class="shadow-3xl">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、 テーマのドキュメント.

インセットシャドウのカスタマイズ

--inset-shadow-* テーマ変数を使用して、以下をカスタマイズします。インセットボックスシャドウ プロジェクトのユーティリティ

@theme {
  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); 
}

これで inset-shadow-md ユーティリティをマークアップで使用できます

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

テーマのカスタマイズの詳細については、 テーマのドキュメント.

シャドウカラーのカスタマイズ

--color-* テーマ変数を使用して、以下をカスタマイズします。color プロジェクトのユーティリティ

@theme {
  --color-regal-blue: #243c5a; 
}

これで、次のようなユーティリティが shadow-regal-blue、inset-shadow-regal-blue、ring-regal-blue、および inset-ring-regal-blueマークアップで使用できます

<div class="shadow-regal-blue">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、 テーマのドキュメント.