[v4]: rotate-y-* utilities rotate in the x dimension in Safari

[kylekz]

What version of Tailwind CSS are you using?

v4.0.0-beta.2

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

Nextjs 15.0.3

What version of Node.js are you using?

20.17.0

What browser are you using?

Chrome, iOS Safari, macOS Safari

What operating system are you using?

Windows 11, iOS 18.1, macOS 15.0.1

Reproduction URL

https://play.tailwindcss.com/sHoCSE6sM2

Describe your issue

in Safari, rotate-y-180 flips vertically instead of horizontally. I've added hover: for desktop usage and active: (press) for mobile. Manually overriding the utility like so fixes it:

@utility rotate-y-180 {
  transform: rotateY(180deg);
}

rotate-y-45 does appear to "shrink" vertically too, so perhaps it's all rotate-y-* utilities. rotate-x-* appears to be fine.

[adamwathan]

Wow this is a truly weird one — I've reduced the reproduction down to the syntax property:

Untitled.mov

It works if we use syntax: "*" but not if we use the correct syntax value of "<transform-function>". Hopefully we can use that quirk to work around it though, can't remember off the top of my head if there was a reason we couldn't use "*" in the first place.

[kylekz]

Looks like this is the webkit bug logged 3 days ago: https://bugs.webkit.org/show_bug.cgi?id=283487

At least there's a workaround I guess 😅