As chojinicki already pointed out, it is not possible without any workarounds, especially without adding extensions to your config file. Because I needed the exact same for my project, I created my own workaround for it.
You have to double the background size of the element and transition the background position using transition-all
to get the desired effect. Note that you require the via-
gradient stop.
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%',
},
},
}
};
Unfortunately, it is very limited and doesn't exactly work with your exact example provided, however this is the closest you can get.