Tailwind按钮悬停时渐变背景无法平滑过渡问题求助

• 我用Tailwind的bg-gradient属性实现了带渐变背景的按钮，同时配置了悬停状态的bg-gradientHover，给按钮加了transition-all duration-300类来做背景渐变动画，但纯色背景的按钮过渡正常，渐变背景按钮的颜色会瞬间切换。
• 我使用ShadCN作为UI框架，这点应该不影响问题。
• 已经尝试用bg-gradient-to-t和bg-gradient-to-b配置渐变，没有效果。

当前按钮类：

inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold ring-offset-background transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-105

我的globals.css文件中渐变变量配置如下：

/* Buttons */
--promo-gradient: linear-gradient(180deg, #ffd775 0%, #c3962d 100%);
--promo-gradient-hover: linear-gradient(180deg, #ffcf57 0%, #aa7d15 100%);

tailwind.config.js中的配置：

backgroundImage: {
  primaryGradient: 'var(--primary-gradient)',
  primaryGradientHover: 'var(--primary-gradient-hover)',
  secondaryGradient: 'var(--secondary-gradient)',
  secondaryGradientHover: 'var(--secondary-gradient-hover)',

  // promo buttons
  promoGradient: 'var(--promo-gradient)',
  promoGradientHover: 'var(--promo-gradient-hover)',
}

以上配置均无误，但背景无法平滑过渡。我为按钮设置了两个变体：

promo: 'bg-promoGradient text-black hover:bg-promoGradientHover',

gradient: 'bg-gradient-to-b from-secondary1 to-secondary2 text-black hover:from-secondary2 hover:to-secondary1',

两种变体的结果一致，均为颜色瞬间切换，没有实现预期的平滑过渡效果。

内容的提问来源于stack exchange，提问作者Jabez du Preez