骨架屏需具备占位、渐变、无内容三大视觉特征，须严格匹配真实UI的比例、留白与断点逻辑，配合animate-pulse、色阶过渡、text-transparent等技术实现自然加载效果，并通过语义属性和交互控制提升可访问性与用户体验。
骨架屏需要什么视觉特征
骨架屏的核心是「占位+渐变+无内容」，不是简单用灰色块模拟结构。Tailwind 本身不提供骨架动画组件，得靠 animate-pulse + 合理的 bg-gray-200 / bg-gray-300 层级搭配实现视觉节奏。关键不是填满所有区域，而是保留内容区块的真实比例和留白关系——比如标题行高、段落行数、图片宽高比，这些必须和最终真实 UI 一致，否则加载完成时会跳动。
用 animate-pulse 实现基础脉冲效果
animate-pulse 是 Tailwind 内置的简单呼吸动画，但默认只作用于背景色变化，且动画曲线偏缓。实际用时要注意三点：
- 必须配合
bg-gray-200到bg-gray-300的色阶过渡，避免用bg-gray-100（太亮）或bg-gray-400（太暗），否则脉冲不明显 - 不能直接加在文字容器上——
animate-pulse对文字颜色无效，只影响背景；文字占位要用text-transparent+bg-clip-text配合伪元素才可靠 - 若需控制动画速度或延迟，得自定义 CSS，Tailwind 默认的
duration-700和delay-100类不够细粒度
示例：一个卡片骨架
<div class="p-4 bg-white rounded-lg animate-pulse">
<div class="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
<div class="flex space-x-4">
<div class="h-10 w-10 rounded-full bg-gray-200"></div>
<div class="flex-1">
<div class="h-3 bg-gray-200 rounded w-1/2 mb-2"></div>
<div class="h-3 bg-gray-200 rounded w-3/4"></div>
</div>
</div>
</div>
响应式骨架要同步断点逻辑
骨架结构必须和真实组件使用同一套 sm:、md:、lg: 前缀。比如真实列表在 md 断点下是两列，骨架也得用 md:grid-cols-2，否则小屏加载完突然变成单列，用户感知到的是布局崩塌，不是加载完成。
立即学习“前端免费学习笔记（深入）”；
常见错误是骨架写死固定尺寸（如 h-64），而真实组件用 h-full 或 min-h-[400px] ——这会导致骨架高度始终不变，内容撑开后出现空白或重叠。
- 优先用相对单位：
h-48→h-64→min-h-[200px]比h-[300px]更安全 - 图片占位推荐
aspect-video/aspect-square而非固定w-64 h-64，尤其在网格布局中 - 文字行高用
leading-relaxed匹配真实文本，避免骨架行距过紧或过松
动态切换骨架和真实内容的边界条件
最易被忽略的是「何时移除骨架」。不能只依赖 isLoading 状态布尔值，得结合数据形态判断：
- 空数组（
[]）不是加载中，是真实空状态，此时应显示空提示而非骨架 - 对象字段为
null或undefined，但其他字段已存在，说明部分数据就绪，骨架应局部退场（比如头像加载完，但描述还在加载） - 服务端返回了
200但 body 为空，前端没做判空，骨架永远不消失
建议用 useEffect 或 watch 监听具体字段，而不是全局 loading 标志。例如：
{isLoading && !data?.title ? <SkeletonTitle /> : <h1>{data.title}</h1>}
骨架本身没有语义，别忘了加 aria-hidden="true"，避免屏幕阅读器误读占位符。
复杂交互区域（比如带按钮、输入框的表单骨架）不要只套 animate-pulse，得禁用交互并灰化边框，否则用户会误点不可用区域。
