必须手写@keyframes skeleton-scan并完整注册到Tailwind配置中，配合渐变背景、background-position位移和固定尺寸容器，才能实现骨架屏真实的光扫流动效果。
animate-pulse不够用，必须手写@keyframes
Tailwind 自带的 animate-pulse 只是 opacity 循环变化，视觉上像灯泡开关，不是骨架屏那种“光扫过”的流动感。真正拟真的效果得靠 background-position 位移 + 渐变背景，这必须手写 @keyframes，不能跳过。
-
@keyframes skeleton-scan必须定义在 CSS 文件里（如src/index.css），且要显式注册进tailwind.config.js的theme.extend.keyframes和theme.extend.animation，键名严格一致 - 漏掉任一端注册，
animate-skeleton-scan类就无效——这是最常见失效原因 - 百分比帧必须加引号：
'0%'✅，0%❌；属性值必须是字符串：backgroundPosition: '0% 50%'✅ - 改完配置必须重启 dev server，Tailwind 不会热更动画类名
容器必须有固定宽高，且不能是 inline 元素
骨架屏动画依赖 background 渲染，而 inline 元素不支持 background，所以哪怕写了 bg-gradient-to-r 也看不见效果。
- 优先用
block、flex或grid容器，配合h-10、min-h-8、aspect-square等固定尺寸类 - 如果父容器是响应式 grid/flex，骨架项结构必须和真实项完全一致（比如同为
grid-cols-2 md:grid-cols-4），否则断点切换时高度错乱 - 已有背景色的元素，先加
bg-transparent清空，再叠加骨架渐变
渐变背景和位移动画参数不能错
光扫效果的核心是线性渐变从左到右平移，但平移过程若跳变或卡顿，就失去真实感。关键参数缺一不可。
- 渐变写法：
bg-gradient-to-r from-transparent via-gray-200 to-transparent - 必须配：
bg-no-repeat+background-size: 200% 200%（否则位移时会重头开始，产生跳变） - 动画时长建议
2s：太快像抽搐，太慢失去加载提示意义 - 移动端注意
background-size值，过大可能导致扫动过快，可微调为150% 150%测试
和懒加载、无限滚动配合时别踩布局偏移坑
骨架屏不只是“看起来在加载”，更要防止内容加载后页面跳动（CLS 升高）。这需要和尺寸控制、占位策略联动。
立即学习“前端免费学习笔记（深入）”；
- 图片类骨架必须配
aspect-ratio（如aspect-video）或h-48 w-full，不能只靠bg-gray-200 - 无限滚动列表中，骨架项要用和真实项相同的
min-h-或h-，避免加载完成瞬间高度塌缩 - 别对整个容器加
opacity-75，应只作用于骨架元素自身，否则已加载内容也被降透明度 - 加载中提示（如 “Loading…”）要用
col-span-full（Grid）或w-full（Flex），确保横跨所有列，不破坏布局流
