Button animation no longer works with tailwind v4

[CesGalaxy]

What version of Tailwind CSS are you using?

v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15

What version of Node.js are you using?

v22.14.0

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction URL

Working animation: https://www.heroui.com/docs/components/button
No animation: https://beta.heroui.com/docs/components/button

Describe your issue

Before upgrading to tailwind4 the buttons had an animation when pressed, now the button continues to shrink but without the animation.

The buttons have the "transition-transform-colors-opacity" class. Before v4, that worked with the "scale-X" class, but now, it shrinks instantly.

So far I've managed to fix it by applying "transition-all" to all the buttons.

[RobinMalfait]

What version of Edge are you using? You might want to double check the browser support: https://tailwindcss.com/docs/compatibility#browser-support

Screen.Recording.2025-04-25.at.15.34.49.mov

[CesGalaxy]

Yes, the button shrinks, but it does so without the animation. It goes from one size to another instantly.

PD: I've updated the issue to be clearer

[RobinMalfait]

transition-transform-colors-opacity is not a class that exists in Tailwind CSS v3 or in Tailwind CSS v4. Do you have a custom implementation for that?

In v4 we use the name scale property https://tailwindcss.com/docs/scale
In v3 we used transform: scale(…) https://v3.tailwindcss.com/docs/scale

So in your definition of transition-transform-colors-opacity you should add the scale property as well.

The transition-transform in Tailwind CSS v4 does already include the scale property for you.

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}

[CesGalaxy]

Yes, that was the problem. Before, the "scale-X" class was treated as a transformation, but now it is a separate property and needs to include "scale" among the "transition-properties", but that's HeroUI's matter. Thanks!!!