顺风背景渐变过渡

Question

Tailwind CSS 是否允许渐变过渡，即更改“从”或“到”颜色，以便任一颜色的渐变通过过渡而改变？

我尝试过的：

<button class="transition duration-500 ease-in-out bg-gradient-to-t from-black to-white hover:to-red-500">
    Hover me
</button>

Answer 1

正如 chojinicki 已经指出的那样，如果没有任何解决方法，这是不可能的，尤其是在不向配置文件添加扩展名的情况下。因为我的项目需要完全相同的东西，所以我为其创建了自己的解决方法。

您必须将元素的背景大小加倍并使用过渡背景位置transition-all才能获得所需的效果。请注意，您需要via-梯度停止。

顺风玩法：https://play.tai​​lwindcss.com/XFQDCOKQ8L

<button className="transition-all duration-500 bg-gradient-to-t to-white via-black from-red-500 bg-size-200 bg-pos-0 hover:bg-pos-100">
    Hover me
</button>

tailwind.config.js

module.exports = {
    // ...
    theme: {
        extend: {
            backgroundSize: {
                'size-200': '200% 200%',
            },
            backgroundPosition: {
                'pos-0': '0% 0%',
                'pos-100': '100% 100%',
            },
        },
    }
};

不幸的是，它非常有限，并且并不完全适用于您提供的确切示例，但这是您可以获得的最接近的示例。

Answer 2

简短回答否，但这并不是因为 Tailwind 中缺乏此功能，而是因为 CSS 本身缺乏此功能。原因可能是性能问题 - 浏览器引擎必须为动画的每一帧渲染单独的渐变。

这是常见问题：使用带有渐变背景的 CSS3 过渡

您只能尝试使用一些解决方法（取决于您期望的确切效果），例如背景位置、不透明度等（链接问题中的示例和大量在线教程）。如果有东西适合你 - 如果你在多个地方需要它，只需将其提取为 Tailwind 实用程序。

https://tailwindcss.com/docs/adding-new-utilities