motion-translate classes interfere with normal translate classes on opposite axis

[Boston343]

It appears as if when you use a motion-translate class for one axis, it messes up normal translate classes for the other axis (at least when using absolute positioning).

I'm testing this out and came across this issue in a tooltip component. To center the tooltip component (which appears on the top), I use the classes absolute top-2 left-[50%] translate-x-[-50%] on the tooltip itself. When adding the class motion-translate-y-in-[.5rem] it messes with the absolute positioning, and completely ignores the translate-x-[-50%] until the exit animation occurs where it's position jumps. See below video for example of it occurring on all tooltip site possibilities.

Previously I was using the tailwindcss-animate package and using the class slide-in-from-bottom-2 works as expected where it animates the y axis positioning and doesn't change the x-axis translation, so I believe it should be possible with this library as well.

I'm using [email protected] and [email protected]. Issue occurs both in dev mode and on the built site (Astro project).

tailwindcss-motion-issue.mp4