RadixUI + tailwind generates a wrong css selector

Question

I am creating a website in Nextjs, with Tailwindcss and RadixUI. Following the documentation for Radix UI's Navigation Menu, I am trying to add an animation on the content part.

I can't get the animations to work when my content section of my navigation menu shows up.

<NavigationMenu.Content className={[ 'data-[motion=to-start]:navigationContentReveal data-[motion=to-end]:navigationContentHide', contentSlot({}), ].join(' ')} >

But, when I look at the generated css, this is what the output looks like:

.data-[motion=to-start]:navigationContentReveal[data-motion=to-start] {
animation: navigationContentReveal 0.8 cubic-bezier(0.44, 0, 0, 0.98);
}

.data-[motion=to-end]:navigationContentHide[data-motion=to-end] {
animation: navigationContentHide 0.8 cubic-bezier(0.44, 0, 0, 0.98);
}

Now, I think this is not correct, right?

versions: "@radix-ui/react-navigation-menu": "^1.1.4", "tailwindcss-radix": "^2.8.0",

Tried it with creating keyframs and animations in my tailwind config, now moved them to CSS, but all to no avail.

Anyone any idea?