顺风背景渐变过渡

Question

Does Tailwind CSS allow transitions of gradients ie 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.

Answer 2

Short answer No , but not because of lack this functionality in Tailwind but rather in CSS itself. Reason for that is probably performance issues - browser engine would have to render separate gradient for every frame of animation.

This is common question: Use CSS3 transitions with gradient backgrounds

You can only try to use some workaround (depends what exactly effect you expect) like background position, opacity etc (examples in linked question and plenty tutorials online). If something works for you - just extract this as Tailwind utility if you need this in multiple places.

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