如何在Tailwind中实现hover时背景色平滑过渡效果？

问题出在你试图从纯色背景（bg-white对应background-color属性）过渡到渐变背景（bg-gradient-to-r对应background-image属性），但你之前指定的过渡属性只针对background-color，无法覆盖background-image的变化，所以过渡不生效。

直接用以下两种写法之一即可解决：

写法1（精准指定过渡属性） #

<div className='transition-[background-color,background-image] duration-150 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'>
  你的元素内容
</div>

写法2（简便的全属性过渡） #

如果不想精准罗列属性，也可以直接用transition-all：

<div className='transition-all duration-150 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'>
  你的元素内容
</div>

关键说明 #

• bg-white设置的是background-color，而渐变背景是通过background-image实现的，你之前用的transition-colors只作用于color、background-color这类颜色相关属性，不包含background-image，所以过渡失效。
• 将过渡属性改为包含background-image（或直接用transition-all），就能让纯色到渐变的切换产生150ms的平滑过渡效果。

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