使用Tailwind时border-radius过渡动画不生效，如何解决？

问题原因 #

你的输入框初始状态未设置边框样式，仅在focus时通过focus:border添加边框。这种情况下，浏览器会将“边框从无到有”的变化与border-radius的数值变化合并处理，导致border-radius的过渡动画无法正常触发——因为元素的盒模型在聚焦前后发生了本质变化，浏览器无法计算平滑过渡的中间状态。

解决方案 #

给输入框添加初始透明边框，确保边框盒模型在初始状态就存在，这样border-radius的变化就只是数值上的过渡，能被浏览器正确识别。

修改后的代码如下：

<input
    type="text" 
    className="transition-border duration-500 rounded-full bg-secondary-neutral border border-transparent pl-4 pr-14 py-2 outline-0 focus:border-accent-neutral focus:rounded-sm focus:bg-white focus:shadow-primary-extra-light focus:shadow-md text-sm text-ellipsis w-full max-w-sm"
    placeholder="Søk etter produkter, merker og mer"
/>

关键调整说明 #

• 新增初始样式：border border-transparent，让元素一开始就拥有边框盒模型，只是边框不可见
• 移除focus:border，因为初始已经有边框，仅保留focus:border-accent-neutral来修改聚焦时的边框颜色

你的Tailwind配置（transitionProperty包含border-radius）是正确的，无需额外修改。添加初始边框后，border-radius从rounded-full到rounded-sm的过渡就能正常生效。

内容的提问来源于stack exchange，提问作者Tomas Jansson