Question

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>

Answer 1

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

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

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

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

Answer 2

正如 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 个答案: