顺风背景渐变过渡答案

【问题标题】：Tailwind background gradient transition顺风背景渐变过渡
【发布时间】：2021-07-12 23:39:21
【问题描述】：

Tailwind CSS 是否允许渐变过渡，即更改 'from' 或 'to' 颜色，以便通过过渡改变任一颜色的渐变？

我尝试过的：

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

【问题讨论】：

一题一题。请更改此设置，否则此问题将很快关闭
也显示你到目前为止尝试过的东西，不要只是等待别人的复制粘贴解决方案
完成。删除 -1 可以非常感谢这个问题。
从纯色到渐变，你可以在上面添加一个绝对的div，纯色背景通过过渡变成透明，所以后面的渐变会慢慢出现:)

标签： javascript html css tailwind-css

【解决方案1】：

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

您必须将元素的背景大小加倍并使用transition-all 转换背景位置才能获得所需的效果。请注意，您需要 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%',
            },
        },
    }
};

不幸的是，它非常有限，不能完全与您提供的确切示例一起使用，但是这是您可以获得的最接近的示例。

【讨论】：

【解决方案2】：

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

这是常见问题：Use CSS3 transitions with gradient backgrounds

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

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

【讨论】：