必须手写@keyframes实现骨架屏扫描效果，通过bg-gradient-to-r与background-position百分比位移模拟光扫，配置animate-skeleton并重启dev server，容器需有固定宽高且非inline。
用 @keyframes 定义闪烁动画，别依赖插件
Tailwind 默认不提供骨架屏动画，animate-pulse 只是简单透明度变化，不够拟真。真正接近骨架屏效果（比如渐变色扫过、明暗交替）必须手写 @keyframes。直接在 tailwind.config.js 的 theme.extend.animation 里加就行，不用引入额外库。
常见错误是把动画写在 CSS 文件里却没配置进 Tailwind，导致 animate-skeleton-scan 类名无效；或者用 opacity 单一属性做“闪烁”，结果看起来像灯泡开关，不是骨架屏那种流动感。
- 推荐用
background-position+linear-gradient模拟光扫效果，比纯 opacity 更真实 - 动画时长控制在
2s左右，太快显得慌，太慢失去加载感 - 务必配
background-size: 200% 200%，否则渐变平移会跳变
给元素加骨架背景，bg-gradient 比 bg-gray-200 更靠谱
单纯设 bg-gray-200 再加 animate-pulse，只是颜色呼吸，没有“扫描线”动态感。骨架屏的核心是模拟光从左到右掠过的效果，得靠渐变位移。
典型写法是：bg-gradient-to-r from-transparent via-gray-200 to-transparent，再配合自定义动画移动 background-position。注意：这个渐变必须设在容器上，且容器需有固定宽高或 min-w-/h- 类，否则动画不可见。
立即学习“前端免费学习笔记（深入）”；
- 容器不能是
inline元素，否则background不生效，优先用block或flex - 如果内容区本身有背景色，记得先清空：
bg-transparent - 移动端要测试
background-size值，过大可能导致扫动过快
animate-skeleton 类名怎么配进 Tailwind 配置
在 tailwind.config.js 的 theme.extend 里补全动画定义，不是只写名字——漏掉 keyframes 就等于没写。
module.exports = {
theme: {
extend: {
animation: {
skeleton: 'skeleton 2s ease-in-out infinite',
},
keyframes: {
skeleton: {
'0%': { backgroundPosition: '0% 50%' },
'100%': { backgroundPosition: '200% 50%' },
}
}
}
}
}
注意：backgroundPosition 值用百分比而非 px，适配不同宽度容器；ease-in-out 比 linear 更自然，避免机械感。
- 改完配置必须重启 dev server，HMR 不会自动重载动画注册
- 类名用
animate-skeleton而不是animate-skeleton-scan，越短越不易拼错 - 如果项目用了 JIT 模式，确保该类名被实际用到，否则可能被 tree-shake 掉
响应式下骨架动画失效？检查 min-width 和父容器
在小屏上动画突然卡住或不触发，大概率是容器宽度塌缩为 0，导致 background-position 无处可移。骨架元素必须有明确尺寸约束。
别只写 h-4，得搭配 min-w-[100px] 或 w-full；如果是列表项，父容器用 flex 但子项没设 flex-1，也会让骨架块收缩。
- 调试技巧：临时加
border border-red-500看骨架容器是否真的渲染了 - 用
max-w-限制宽度上限，防止在大屏上扫动过慢 - 动画在
hidden或opacity-0元素上不会执行，确保骨架元素是可见状态
骨架屏动画的细节都在尺寸和背景行为里，不是加个类名就完事。最常被忽略的是容器尺寸缺失和配置未重启，这两点卡住几乎一半的实现。
