Tailwind background gradient transition

Question

Does Tailwind CSS allow transitions of gradients i.e. changing the 'from' or 'to' color so that the gradient of either color changes by a transition?

What I have tried:

<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

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.