beautiful-shadows

name	beautiful-shadows
description	应用精确的 Tailwind 任意值阴影工具类，做出精致、分层的中性抬升。当紧凑卡片、控件、面板、popover、hero 媒体、特性标注或类模态容器需要精致阴影，而不用默认 Tailwind 阴影尺度或带色着色时使用。

Beautiful Shadows

何时使用

• 某个面板需要精致、分层的抬升。
• 默认 Tailwind 阴影显得太通用或太生硬。
• 设计需要中性、精致的深度，而无带色发光。

阴影工具类

使用这些确切的 Tailwind 类。

Beautiful sm

用于紧凑卡片、表单控件、胶囊与更安静的面板。

shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]

Beautiful md

用于卡片、面板、popover，以及默认的抬升面板样式。

shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]

Beautiful lg

用于 hero 媒体、特性标注、类模态容器，以及最强的抬升。

shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]

示例

<div class="rounded-xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
  ...
</div>

使用规则

• Beautiful sm 用于紧凑卡片、表单控件、胶囊与更安静的面板。
• Beautiful md 用于卡片、面板、popover，以及默认的抬升面板样式。
• Beautiful lg 用于 hero 媒体、特性标注、类模态容器，以及最强的抬升。
• 搭配干净的面板填充与一致的圆角。
• 每个组件状态用一种阴影强度，除非交互明显改变抬升。

避免

• 在同一组件上把这些与默认 Tailwind 阴影尺度混用。
• 用强色给这些阴影着色；保持它们中性、精致。
• 把 Beautiful lg 用于密集列表或细小控件。
• 在一个元素上堆叠多个阴影工具类。
• 在极低对比布局中用这些替代清晰边框。