Tailwindシャドウジェネレーター
レイヤー化したシャドウを視覚的に作成し、Tailwindのshadow-[...]任意値クラスと
生のCSSを取得できます。
仕組み
各レイヤーのoffset-x、offset-y、ぼかし、広がり、色、insetの切り替えは、1つの
box-shadowセグメントにまとめられ、複数のレイヤーはカンマで連結されます。これは
標準的なCSSの複数シャドウ構文です。Tailwindクラスの場合、同じ値のスペースがアンダースコアに
置き換えられ、カンマはそのまま残されます（Tailwindの任意値パーサーは
shadow-[0_4px_6px_rgba(0,0,0,0.1)]のような形式を想定しています）。そのうえで
shadow-[...]にラップされます。プレビューボックスの実際のbox-shadow
スタイルは生のCSSバージョンに設定されるため、表示されているものは両方の出力と正確に一致します。
すべて設定した値からこのページのJavaScript内で計算されます。アップロードは一切行われません。
よくある質問
Tailwindの任意値シャドウクラスはどのように機能しますか?
Tailwindではshadow-[<任意のCSS値>]と書くだけで、設定ファイルの変更なしにそのままbox-shadow: <任意のCSS値>にコンパイルされます。値の中のスペースはアンダースコアにする必要がありますが、これはこのツールが自動的に処理します。
複数のシャドウレイヤーを重ねられますか?
はい。「レイヤーを追加」をクリックするとシャドウを上に重ねて追加できます。実際のbox-shadowはカンマ区切りのレイヤーに対応しており、このツールも同じ方法でレイヤーをカンマでつないで任意値クラスを作成します。
これはどこかに送信されますか?
いいえ。シャドウの作成とプレビューはすべてブラウザのCSSエンジン内で行われます。アップロードは一切行われません。