| 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 用于密集列表或细小控件。
- 在一个元素上堆叠多个阴影工具类。
- 在极低对比布局中用这些替代清晰边框。
