如何在悬停时在 Tailwind 中进行平滑的背景颜色更改？

Question

我正在尝试更改悬停时元素的背景颜色。通常，我会使用

className='bg-white hover:bg-black'

这会立即改变颜色，但我想增加 150 毫秒的从颜色 A 到颜色 B 的过渡时间。

阅读文档后，我尝试了类似的方法

className='transition-colors ease-linear duration-300 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'

这没有做任何事情。我混合并匹配了不同的状态等，但找不到解决方案。有人知道快速解决这个问题吗？

我试过：

className='transition-colors ease-linear duration-300 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'

className='transition-[background-color] duration-300 bg-white hover:bg-gradient-to-r from-[#04348B] to-[#0854e2d0]'

Answer 1

要在悬停时在 Tailwind 中创建平滑的背景颜色变化，您可以使用以下语法：

className='bg-white transition-colors duration-300 ease-in-out hover:bg-black'

说明：

• bg-white

  将元素的初始背景颜色设置为白色。

• transition-colors

  启用颜色变化的过渡效果。

• duration-300

  将过渡效果的持续时间设置为 300ms。

• ease-in-out

  设置过渡定时功能为ease-in-out，提供平滑的过渡效果。

• hover:bg-black

  在悬停时将元素的背景颜色设置为黑色。

你应该避免在一个元素中使用两个类属性，因为它会导致冲突并使你的代码更难阅读。相反，您可以将类链接在一起，并在它们之间留一个空格。