[bug]: Navigation Menu animation not working properly

[nordaun-development]

Describe the bug

When you hover to a another navigation menu trigger the menu content doesnt transition properly.

2025-03-04.15-01-32.mp4

Affected component/components

Navigation Menu

How to reproduce

Hover over a navigation menu trigger.
Hover over another navigation trigger next to it.
There is no longer transition between the two menus like there used to be before tailwind v4

Codesandbox/StackBlitz link

No response

Logs

System Info

Browser: Chromium

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[Jacksonmills]

jamiebuilds/tailwindcss-animate#63 (comment)

This user made a CSS first replacement for the plugin, in the meantime use this! @shadcn do you think it best to just add the animations to our globals.css and remove the need for tailwind-animate?

@nordaun-development let me know if you have trouble setting this up, I was able to get animations working again

[nordaun-development]

Hello Jackson!

i already have tailwindcss-animate in my globals.css however the there is still no transition between the two NavigationMenuContent.
This is the top line of my globals.css. I installed the tailwind-animate npm package but still nothing works:

@import "tailwindcss";
@plugin "tailwindcss-animate";

If you have any idea what causes this issue i would much appreciate it. :)

[Jacksonmills]

Check out this replacement for the package tailwindcss-animate

https://github.com/Wombosvideo/tailwindcss-animate-v4 - its just a css file you can use

[nordaun-development]

Thank you so much! It finally works

[Jacksonmills]

@nordaun-development can you reopen until we've figured out a solution

[nordaun-development]

Sure. Let me know if you figured out what was wrong

[Jacksonmills]

tyty nothing wrong, just wanted to track the work if we need to remove tailwindcss-animate and use the CSS first approach

[danielchungdev]

Is anyone experiencing the similar animation problem with the accordion?

[Jacksonmills]

@danielchungdev did you try the css first replacement?

[danielchungdev]

@danielchungdev did you try the css first replacement?

Yeah, I read the file and it seems that the animation for the accordion is not on the file

[meisamtj81]

Check out this replacement for the package tailwindcss-animate

https://github.com/Wombosvideo/tailwindcss-animate-v4 - its just a css file you can use

Thank you, I had same issue, and this fixes it temporarily but I think it should imported as plugin.
Does anyone know what cause this issue and how to fix it?