用途:为界面表面提供精致、分层的悬浮感。当默认 Tailwind 阴影显得过于通用或生硬,或需要中性、细腻的深度而不带彩色光晕时使用。
主要能力:提供三档精确的 Tailwind 任意值阴影类。Beautiful sm 用于紧凑卡片、表单控件、胶囊标签和较安静的表面;Beautiful md 用于卡片、面板、弹出层及默认抬升表面样式;Beautiful lg 用于主视觉媒体、功能标注、类模态容器及最强抬升。
使用方式:直接使用给定的 Tailwind 类,例如 Beautiful md 对应 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)]。搭配干净的表面填充和一致的圆角;每个组件状态只使用一种阴影强度,除非交互明确改变抬升。
限制:不要在同一组件上混用这些阴影与默认 Tailwind 阴影刻度;不要用强烈颜色给这些阴影着色,应保持中性细腻;不要将 Beautiful lg 用于密集列表或微小控件;不要在一个元素上叠加多个阴影工具类;不要在极低对比度布局中用它们替代清晰的边框。