Tailwind 默认不支持 width 过渡动画，需用 transition-[width] 配合内联 style="width: X%" 实现平滑动画，类名切换（如 w-1/2）无法插值。
为什么直接用 transition 动画 width 在 Tailwind 里不生效
因为 Tailwind 默认只对 transform、opacity、background-color 等少数属性启用过渡动画，width 不在默认列表里。直接写 transition-width 或 transition-all 也无效——除非你手动扩展配置。
- 检查你的
tailwind.config.js是否启用了width的 transition 支持（默认没开） - 即使开了，用百分比宽度（如
w-1/2）或任意值（如w-[65%]）时，浏览器无法对 CSS 类切换做插值动画，本质是“类名切换”，不是连续数值变化 - 更可靠的方式是用内联
style控制width，再配合transition声明
用 transition-[width] + 内联 style 实现平滑动画
这是最可控、兼容性好、无需改配置的做法。核心是：让 Tailwind 处理过渡声明，让 JS 或服务端控制具体宽度值。
- 进度条容器加
bg-gray-200 rounded-full h-2 - 内部条用
bg-blue-500 h-2 rounded-full transition-[width] duration-300 ease-out - 通过
style="width: 72%"动态设置实际宽度（注意必须带百分号） - 不要用
w-3/4这类工具类替代style，否则无动画
<div class="bg-gray-200 rounded-full h-2">
<div
class="bg-blue-500 h-2 rounded-full transition-[width] duration-300 ease-out"
style="width: 72%"
></div>
</div>
如果坚持用纯工具类，得靠 @apply 或自定义 transition
Tailwind 不支持 transition-width 工具类，但你可以手动注入：
- 在
tailwind.config.js的theme.transitionProperty中添加width - 然后用
transition-property: width对应的工具类（需开启plugins: [require('@tailwindcss/forms')]或自行写插件） - 更简单的是在 CSS 中用
@layer utilities补一个：@apply transition-[width] duration-300 - 但即便如此，仍需用
style设置宽度——工具类本身不提供可变宽度值
动画卡顿或跳变的常见原因
不是写法错，而是触发了非合成层渲染或布局抖动：
立即学习“前端免费学习笔记（深入）”；
- 用
height或margin配合width动画？会强制重排，优先改用transform: scaleX()（但需额外处理对齐和 overflow） - 在 React/Vue 中频繁 setState / reactive 更新，建议加防抖或用
requestAnimationFrame节流 - 初始状态没设
width: 0%，导致第一次动画从auto开始，浏览器无法插值 → 务必初始化内联style="width: 0%" - 使用
max-w-full或min-w-0防止父容器干扰宽度计算
style 提供且单位明确；所有基于类名切换的 width 工具类，本质上都是离散状态，没法动画。 
