I want to animate the gradient background, but it's not working. If I replace 'animate-gradient' with the built-in class 'animate-pulse', the animation does work.
Playground Link: https://play.tailwindcss.com/XL2lZ4M1Mr?file=config
It is because you are changing the background-position with percentage values but the size of the background gradient is the same size as the element it is applied to. If we look at how percentages work in background-position:
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
The (container width - image width) and (container height - image height) both evaluate to 0, so there is never any offset.
You could consider making the background image gradient a different size to its element using the background-size CSS property:
tailwind.config = {
mode: 'jit',
theme: {
extend: {
keyframes: {
'gradient-shift': {
"0%": {
"background-position": "0% 50%",
},
"50%": {
"background-position": "100% 50%",
},
"100%": {
"background-position": "0% 50%",
}
},
},
animation: {
gradient: 'gradient-shift 15s ease infinite',
},
},
},
plugins: [],
}html,
body {
background-color: #030303;
min-height: 100vh;
}<script src="https://cdn.tailwindcss.com/3.4.15"></script>
<div class="px-8 py-32">
<div class="grid gap-8 items-start justify-center">
<div class="relative group">
<div class="absolute -inset-6 top-8 right-1 bg-gradient-to-r from-[#0fffc1] to-[#7e0fff] rounded-lg blur-[4vw] opacity-75 animate-gradient" style="background-size: 200% 200%"></div>
<button class="relative px-7 py-40 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
<span class="flex items-center space-x-5">
<span class="pr-6 text-gray-100">Labs Release 2021.09</span>
</span>
<span class="pl-6 text-indigo-400">See what's new →</span>
</button>
</div>
</div>
</div>