正如chojinicki已经指出的那样，没有任何变通方法是不可能的，特别是不向配置文件添加扩展名。因为我的项目需要完全相同的东西，所以我为它创建了自己的变通方法。
你必须将元素的背景尺寸加倍，并使用transition-all转换背景位置以获得所需的效果。请注意，你需要via-渐变停止。
Tailwind Play：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%',
            },
        },
    }
};

型
不幸的是，它是非常有限的，并不完全与您提供的确切的例子，但这是最接近你可以得到。

简短的回答否，但不是因为Tailwind缺少此功能，而是CSS本身。原因可能是性能问题-浏览器引擎必须为动画的每一帧渲染单独的渐变。
常见问题：Use CSS3 transitions with gradient backgrounds
你只能尝试使用一些变通方法（取决于你期望的确切效果），如背景位置，不透明度等（链接问题和大量在线教程中的示例）。如果对你有用-只需将其提取为Tailwind实用程序，如果你在多个地方需要它。
https://tailwindcss.com/docs/adding-new-utilities的

以下是根据chojnicki的建议，使用CSS @property的一种可能实现。
该实现大量借用了this answer的代码。
首先，你定义属性的初始值，然后将其与一个类相关联，在那里你将配置渐变和过渡。之后，你应该为这个类配置另一个样式，并将悬停选择器附加到它，更改定义的颜色。

@layer utilities {
  @property --myColor1 {
    syntax: '<color>';
    initial-value: theme(colors.cyan.500);
    inherits: false;
  }

  @property --myColor2 {
    syntax: '<color>';
    initial-value: theme(colors.emerald.500);
    inherits: false;
  }

  .my-button {
    background: linear-gradient(var(--myColor1), var(--myColor2));
    transition:
      --myColor1 0.5s ease-in-out,
      --myColor2 0.5s ease-in-out;
  }

  .my-button:hover {
    --myColor1: theme(colors.orange.500);
    --myColor2: theme(colors.yellow.500);
  }
}

字符串
然后你只需要引用这个类。

<button class="my-button">
    Hover me
</button>

型
注意事项：属性和类是在@layer utilities下定义的，用于表达意图并获得优先于其他类的优先级。您可以在这里找到更多有关它的信息。