I have been trying to find out why this button using tailwind class names doesnt transition nicely

I want this button to transision slowly when hovered so that it looks nice for my site. I've tried all transision classes but can't find a solution, please help me!

<a href="/shop-register" class="transition duration-500 rounded-full text-lg px-6 py-3 text-center text-neutral-100 bg-gradient-to-r from-blue-300 via-blue-600 to-blue-300 hover:from-blue-600 hover:via-blue-400 hover:to-blue-600">
    Make Shop
</a>

I want it to transition slowly to a diffrent gradient layout.

Solution

I completed that. we can't directly modify gradiant color but we use ::before to achieve

tailwind css play live preview: https://play.tailwindcss.com/DSm1K18OJD

@tailwind base;
@tailwind components;
@tailwind utilities;

.gradient2{
  @apply relative bg-gradient-to-r from-blue-300 via-blue-600 to-blue-300 z-10 rounded-full;
}

.gradient2::before{
  @apply absolute content-[''] inset-0 bg-gradient-to-r from-blue-600 via-blue-400 to-blue-600 -z-10 duration-1000 opacity-0 rounded-full;
}

.gradient2:hover::before{
  @apply opacity-100;
}

<div class="m-9">
  <div class="gradient2 inline-block px-6 py-3 text-lg text-neutral-100">
    <a href="#">My Button</a>
  </div>
</div>

tailwind css play live preview: https://play.tailwindcss.com/DSm1K18OJD