Animate pulse doesn't seem to be working as expected?

[miguelnneto]

Hey all,

I'm trying to do something very simple, which is just to get 10 rows with animate-pulse. What I expected, based on the docs, is that the color would fade in and out, however in addition to that, it seems that it is also expanding/contracting the rows.. can anyone help?

My code:

          <div className={`flex flex-col mt-4`}>
            {Array.from(
              { length: searchParams.get("perPage") },
              (_, i) => i
            ).map((el, idx) => (
              <div className="animate-pulse space-x-4">
                <div className="w-full bg-blue-400 h-[80px] "></div>
              </div>
            ))}
          </div>

I have attached a video of what I'm getting with this code. Not sure if I'm doing something wrong..

Screen.Recording.2025-02-25.at.02.17.45.mov

[rozsazoltan]

I can't reproduce: https://play.tailwindcss.com/6X9N4ft4Fl

[wongjn]

Do you have some third-party CSS somewhere that could be redefining @keyframes pulse or animate-pulse? Consider providing a reproduction.

[miguelnneto]

Apparently it was semantic-ui-css that was redefining @keyframes pulse.
Thank you!