直接用 progress 元素在 tailwind 中不生效，因其样式未被重置且浏览器渲染差异大；需用嵌套 div 模拟：外层设宽高/背景/overflow-hidden，内条用 h-full + bg-* + w-[x%] + transition 控制填充与动画。
为什么直接用 progress 元素在 Tailwind 中不生效？
Tailwind 默认不重置原生 <progress></progress> 样式，且各浏览器渲染差异大（Chrome 显示蓝条、Firefox 灰底+绿块、Safari 甚至不响应 width），导致 max 和 value 值变化时视觉无反馈或错位。你写的 class="w-1/2 bg-blue-500" 对原生 <progress></progress> 完全无效——它不是普通 div，不能靠 width 控制填充长度。
用 div 模拟进度条：结构和关键 class 组合
最可靠的方式是用两个嵌套 <div>：外层定义容器宽度与背景，内层用 <code>h-full + bg-* + 动态 w-[x%] 控制填充比例。必须加 overflow-hidden 防止内条溢出。
常见错误包括：
• 忘记给外层设 relative 或 h-2 导致高度塌陷
• 内条没加 h-full，高度随内容撑开
• 用 flex 包裹但未设 flex-1，响应式下宽度失效
基础结构示例：
<div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-blue-500 w-3/4 transition-all duration-300 ease-out"></div> </div>
注意：w-3/4 可替换为 w-[65%]（支持任意百分比）、min-w-[20%]（防过窄）等。
响应式断点怎么配？别只写 md:w-1/2
Tailwind 的响应式前缀要作用在「填充条」上，不是外层容器。否则小屏下进度条变宽但填充比例不变，看起来像“卡住”。正确做法是让内条的宽度类随断点变化：
-
sm:w-1/4 md:w-1/2 lg:w-3/4—— 小屏填 25%，中屏 50%，大屏 75% - 若需动态更新（如 API 返回进度值），用 JS 设置
style="width: ${percent}%"，此时响应式 class 会失效，应改用max-w-full+min-w-0配合 JS 控制 - 移动端慎用
h-1，iOS Safari 下 1px 高度可能渲染为模糊线，建议最低用h-1.5（≈6px）
动画卡顿或跳变？检查 transition 和硬件加速
进度变化时出现生硬跳变，大概率是没加 transition-all 或漏了 duration-；但加了仍卡顿，常见原因是浏览器没触发 GPU 加速。解决方案：
• 必须对内条加 transform: translateZ(0) 或 will-change: width（Tailwind 中用 will-change-auto 或自定义插件）
• 避免同时过渡 width 和 opacity，优先只动 width
• 若用 JS 频繁更新，改用 requestAnimationFrame 批量设置，不要每 10ms 直接改 style
推荐组合：transition-all duration-500 ease-in-out will-change-auto
实际项目里最容易被忽略的是：外层容器的 border-radius 必须和内条一致，否则小尺寸下圆角裁剪错位；还有 SSR 场景下服务端渲染的初始 w-0 和客户端 JS 更新之间存在闪动，得用 opacity-0 + animate-fadeIn 过渡。
