How to upgrade rotate- in tailwindcss v4?

[Debbl]

the rotate-45 is transformed into transform: rotate(45deg); before v4.

see https://play.tailwindcss.com/F637QTFwch, and hover the box

but in v4 it be transformed into rotate: 45deg;

if there is an animation that uses transform rotate, there is a problem here.

see https://play.tailwindcss.com/x7W58yQxAP, and hover the box

[Inventoris]

Hi @Debbl.

I don't see a problem, the animation from both examples works for me.

But to be more correct, you need to animate not transform, but rotate like this:

@import "tailwindcss";

@theme {
  --animate-rotate-hover: animate-rotate 3s linear infinite;

  @keyframes animate-rotate {
    0%,
    100% {
      rotate: -30deg;
    }
    50% {
      rotate: 30deg;
    }
  }
}

[Debbl]

Thanks, but the npx @tailwindcss/upgrade@next and Upgrade guide doesn't seem to be any mention it.