用内联style="width: X%"实现进度条动画最有效，因Tailwind默认不生成w-1%～w-99%等动态宽度类，且width不在transition默认属性列表中，需配合transition-[width]或transition-all使用。
用 width 动态控制进度条宽度时，为什么 CSS 类不生效？
直接写 class="w-10" 或 class="w-25" 是静态的，Tailwind 默认只生成预设的 width 工具类（如 w-0、w-1/4、w-1/2），没有为每个百分比生成 w-1%～w-99%。所以用 style="width: ${percent}%" 是最直接有效的做法，不是“绕过 Tailwind”，而是合理分工：Tailwind 负责布局和基础样式，内联 style 负责动态值。
常见错误是试图用 class={`w-${percent}`}，结果页面没反应——因为 w-37 这类类名根本不存在。
- 确认
tailwind.config.js没启用experimental.optimizeUniversalDefaults（旧版可能干扰 width 类生成） - 不要依赖插件自动生成所有百分比类，体积膨胀且不可控
- 如果必须用 class 控制，可手动在
theme.extend.width中添加高频值，例如：'20%': '20%', '40%': '40%'
如何让进度条平滑过渡宽度变化？
Tailwind 的 transition 工具类默认只作用于 color、background-color、opacity 等属性，width 不在默认列表里。必须显式指定：
<div class="h-1 bg-gray-200 rounded-full overflow-hidden">
<div
class="h-full bg-blue-500 transition-all duration-300 ease-out"
style="width: {{ percent }}%"
></div>
</div>
注意点：
立即学习“前端免费学习笔记（深入）”；
-
transition-all或transition-width（需 Tailwind v3.3+ 且开启transitionProperty扩展）才管用 -
ease-out比ease-in-out更适合加载场景：起始快、结尾缓，视觉上更“即将完成” - 避免同时设置
max-w-full或min-w-0，它们可能与width冲突导致跳变
React/Vue 中更新 width 时为什么卡顿或跳帧？
频繁 setState / ref 更新（比如每 10ms 改一次）会触发多次渲染，尤其在低性能设备上明显。关键不是 Tailwind，而是 DOM 更新节奏。
- 用
requestAnimationFrame节流，把 width 更新收敛到每帧一次 - 服务端渲染（SSR）时，初始
style值不能为 0%，否则首屏闪一下；建议初始设为width: 2%或用opacity: 0隐藏直到 JS 加载完成 - 若用
useEffect启动加载逻辑，确保清理函数中取消未完成的动画帧
移动端 Safari 上进度条突然消失或错位怎么办？
Safari 对 transform 和 width 混合使用较敏感，尤其配合 overflow-hidden 时。典型表现是进度条在 iOS 上“闪一下就没了”。
- 给外层容器加
translateZ(0)强制硬件加速：style="transform: translateZ(0)" - 避免在进度条上同时用
rounded-full和极窄高度（如h-0.5），改用h-1+rounded-sm - 不要用
flex布局包裹进度条本身，Safari 对 flex item 的 width 动画支持不稳定；纯 block 布局更稳妥
style 的响应方式——尤其是 Safari 的合成层判断和 React 的批量更新时机，这些地方一不留神，进度条就变成“进度幻灯片”。 
