最稳写法是用 style="width: x%"，因 tailwind 默认不生成 w-1%~w-99%，class={w-${percent}} 无效；应由 js 控制内联 width 值，外层设 h-2 bg-gray-200 rounded-full overflow-hidden，内层设 h-full bg-blue-500 transition-[width] duration-300 ease-out 并初始 style="width: 0%"。
直接用 style="width: X%" 是最稳的写法
Tailwind 默认不生成 w-1% 到 w-99% 这类动态宽度类，所以别写 class={`w-${percent}`}——这类类名根本不存在，页面不会变。正确做法是让 Tailwind 负责容器样式和过渡声明，JS 或服务端控制内联 style 的 width 值。
- 进度条外层加
h-2 bg-gray-200 rounded-full overflow-hidden - 内部填充层加
h-full bg-blue-500 transition-[width] duration-300 ease-out - 动态设置
style="width: 67%"（注意带百分号） - 初始值必须设为
style="width: 0%"，否则第一次动画从auto开始，无法插值
transition-[width] 比 transition-all 更精准
transition-all 看似省事，但它会尝试对所有可动画属性生效，而 width 在多数浏览器中触发重排，容易卡顿。显式写 transition-[width] 不仅语义清晰，还能避免意外影响其他属性（比如误触 opacity 或 transform）。
- 确保你的 Tailwind 版本 ≥ v3.2，
transition-[width]才可用 - 不用改
tailwind.config.js，无需启用experimental.optimizeUniversalDefaults - 如果用了
transition-all却没动画，大概率是 width 没被纳入过渡列表，不是配置漏了，而是浏览器默认不支持 width 插值
移动端 Safari 上进度条消失？检查 overflow-hidden 和 transform 混用
iOS Safari 对 overflow-hidden 容器里含 transform + width 变化的元素特别敏感，常见表现是进度条闪一下就没了，或位置偏移。这不是 Bug，是渲染引擎对合成层处理的差异。
- 优先用
scaleX()替代width：内部元素加origin-left transition-transform duration-500，再动态设style="transform: scaleX(0.8)" - 若坚持用
width，给外层容器加will-change: width（慎用，只在长时动画场景） - 别同时设
max-w-full和width，它们在 flex 布局下可能冲突导致跳变
React/Vue 中更新频繁导致卡顿？用 requestAnimationFrame 节流
axios 的 onDownloadProgress 可能每几十毫秒触发一次，直接 setState 或响应式赋值会引发连续重渲染，尤其在低端安卓机上明显掉帧。
- 不要在循环里反复调用
el.style.width = `${p}%` - 改用
requestAnimationFrame批量收敛：每次只更新一帧，丢弃中间值 - 清理未完成的动画帧：useEffect 返回的 cleanup 函数里调用
cancelAnimationFrame - SSR 首屏别设
width: 0%，改用opacity: 0+ JS 加载后 fade in，避免闪动
flex 计算、min-w-0 缺失、或 iOS 下 overflow-hidden 与缩放坐标的隐式耦合。这些细节不报错，但会让进度条在某些设备上“看起来不对”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
