CSS のシャドウから Tailwind へ

一般的な影 → shadow / shadow-lg。独自の影 → 任意値。

よく使う影は対応が明確で、控えめな高さは shadow、はっきり浮かせたい場合は shadow-lg です。多層や色付きのブランドシャドウは任意値になり、クラス名からは印象が読めません。最後は実際の表示を並べて比べてください。

スケールの影

柔らかい box-shadow は多くの場合 shadow / shadow-md。多段のブランド影は shadow-[…] が多い。

フィルタ

drop-shadow と filter は常に 1:1 ではない。ユーティリティを無理押しする前にメモを読む。

正直な elevation

コンバーターがレビューを求めたら「最寄りの shadow」ではなく brackets で正確な値を残す。

試す

コンバーターを開く

.example { display: flex; gap: 1rem; padding: 1rem; }

信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。