smooth-shadow-ring

高さのあるサーフェス：border と shadow の併用ではなく、smooth-shadow-ring を使う

適用対象

ページのサーフェスより上に浮かんで表示されるすべての要素：カード、ダイアログ、モーダル、ポップオーバー、ドロップダウン、メニュー、ツールチップ、シート、トースト、コマンドパレット。

問題点

同じ要素に border-*（または ring-*）と shadow-* を設定すると、境界線が二重に重なります。border はくっきりした 1px の線を描き、そのすぐ外側から影が始まります。その結果、シャープな線と柔らかな線が並ぶ、目に見える二重の境界線ができます。重たく、くすんで安っぽく見えます。

ルール

高さのあるサーフェスに shadow-* と並べて border-* または ring-* クラスを指定しようとしている場合は、代わりに smooth-shadow-ring-{size} を使ってください。最終的なシャドウレイヤーに 1px の細いリングが組み込まれるため、縁がシャドウに溶け込み、ひと続きの線になります。

• border shadow-md → smooth-shadow-ring-md
• ring-1 ring-neutral-200 shadow-lg → smooth-shadow-ring-lg
• サイズ：smooth-shadow-ring-xs、-sm、-md（または単独の smooth-shadow-ring）、-lg、-xl、-2xl
• smooth-shadow-ring-* が設定された要素に border や ring を残さないでください。リングはすでに含まれているため、縁が二重になります。
• サーフェスに縁取りがまったく必要ない場合は、border ではなく、単独の smooth-shadow-{size}（リングなし）を使ってください。

色付け

リングとシャドウにはそれぞれ独立して色を設定でき、同じ要素上で組み合わせて使えます。

• shadow-{color} はシャドウに色を付けます。例：shadow-blue-500
• smooth-ring-{color} はリングに色を付けます。例：smooth-ring-black/10、smooth-ring-blue-500/40

リングのデフォルト色は rgba(0,0,0,0.05) で、ダークモードでは rgba(255,255,255,0.18) に切り替わります。.dark クラス、data-theme="dark"、または（OS の設定に応じたダークモードの場合）ページでの color-scheme: light dark の宣言が対象です。prefers-color-scheme だけを基準に切り替わることはないため、ライトモードのみのサイトでは、すべての訪問者にライト用のリングが表示されます。サイトのダークモードが prefers-color-scheme メディアクエリだけで制御されている場合は、リングも連動するよう、:root { color-scheme: light dark; } を宣言してください。

意図的に、ダークモードのアルファ値はライトモードより大幅に高く設定されています。リングはサーフェスの外側に描画されるため、その表示色は輪郭を囲むサーフェスではなく、背後のページの色になります。そのため、白い細線は盛り上がったダークサーフェスに向かって明るくなります。アルファ値が低すぎると、縁がサーフェス自体の色に近づいて見えなくなります。暗いページ上でリングに近い明るさのサーフェス（neutral-700 以上など）では、smooth-ring-* を明示的に設定してください。

リングの幅

細線の幅はデフォルトで 1px で、プロジェクトの Tailwind のリング幅に自動的に従います。そのため、プロジェクトで @theme { --default-ring-width: 0.5px; } を設定している場合、追加設定なしでここでも 0.5px の細線になります。一致させるために幅をハードコードしないでください。プロジェクトのリング幅と異なる幅が必要な場合に限り、任意のスコープで --smooth-ring-width を上書きしてください。要素ごとに設定する場合は [--smooth-ring-width:2px] を使います。

上書き

ユーティリティには !important がなく、通常のカスケードに従うため、後続のユーティリティ、インラインの style、または box-shadow に対する JS アニメーションで通常どおり上書きできます。コンポーネントライブラリ独自の box-shadow のように、これより優先順位の高い CSS（通常はレイヤーなしで提供されます）に勝たせる必要がある場合は、グローバルな上書きではなく、その要素に Tailwind の important 修飾子を使ってください。

<div class="smooth-shadow-ring-md!">…</div>

例

<div class="rounded-2xl border border-neutral-200 shadow-md">…</div>


<div class="rounded-2xl smooth-shadow-ring-md">…</div>


<div class="rounded-2xl smooth-shadow-ring-md smooth-ring-black/10 shadow-blue-500">…</div>