Tailwind animation: animate-pulse

[mjapadilla]

Tailwind 3.3.2

Using animate-pulse it should be animating opacity from 50% to 100% but instead it animate the size
From thtis

To this

[wongjn]

Please consider reproducing the undesired behavior in a Tailwind Play.

[janhesters]

I have the same behavior 🤔

It's even in the docs for me lol.

[aumirza]

it also happening with me

"tailwindcss": "^3.2.4"

Recording.2024-11-23.131046.mp4

Solution i used

Add this to your tailwind config file
extend: { animation: { pulse: "pulseOpacity 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, keyframes: { pulseOpacity: { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.5 }, }, }, },