Cannot get starting:translate-y to work properly in safari. Coding it in CSS works

[RaederDev]

I'm not sure if this is a tailwind or safari bug but I ran into an issue where starting-style seems to break.
https://play.tailwindcss.com/ClQpDWz4UT
The red square is supposed to animate up to the top from the bottom. This works in Chrome and FF but not Safari 18.5.

I recreated the example with plain CSS and it works properly in Safari:
https://codepen.io/RaederDev/pen/VYLxGqx

I cannot figure out what tailwind is doing differently here or how to solve this.

[hjaber]

Spent a long time debugging a <dialog>'s starting:open:translate-y-200 and came to the same conclusion/fix as you.

Potentially @starting-style fails to apply when the value that changes is inside a custom property.

.starting\:translate-y-200 {
    @starting-style {
      --tw-translate-y: calc(var(--spacing) * 200);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }