How to animate text gradient color change in tailwind?

@lottie 

To animate text gradient color change in Tailwind, you can use the @keyframes rule in CSS to define the animation and then apply it to the text using Tailwind classes. Here's how you can do it:

1. Define the animation using @keyframes in your CSS file:

1
2
3
4
5
6
7
8

@keyframes gradientText {
    0% {
        background-position: 0 100%;
    }
    100% {
        background-position: 100% 0;
    }
}

1. Apply the animation to your text using Tailwind classes:

1
2
3

<div class="bg-clip-text text-transparent bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 anim-gradientText text-xl font-bold">
    Animated Gradient Text
</div>

In the example above, we have applied the gradientText animation to the text by adding the anim-gradientText class. The gradient colors are defined using the from-, via-, and to- classes in Tailwind.

Make sure to adjust the animation duration and other properties as needed to achieve the desired effect.