顺风背景渐变过渡

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转换背景 position 以获得所需的效果。 请注意，您需要via-梯度停止。

顺风玩： https://play.tailwindcss.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 本身缺少此功能。 原因可能是性能问题 - 浏览器引擎必须为 animation 的每一帧呈现单独的渐变。

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

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

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