ui [bug]: Navigation Menu animation not working properly

Describe the bug

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

https://github.com/user-attachments/assets/ff6f5f42-677b-4587-8e08-b516efe6a5b9

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

[x] I've made research efforts and searched the documentation
[x] I've searched for existing issues

Mar 04 '25 14:03 nordaun-development

https://github.com/jamiebuilds/tailwindcss-animate/pull/63#issuecomment-2619069581

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

Mar 04 '25 18:03 Jacksonmills

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. :)

Mar 04 '25 18:03 nordaun-development

Check out this replacement for the package tailwindcss-animate

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

Mar 04 '25 18:03 Jacksonmills

Thank you so much! It finally works

Mar 04 '25 19:03 nordaun-development

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

Mar 04 '25 23:03 Jacksonmills

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

Mar 05 '25 07:03 nordaun-development

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

Mar 05 '25 13:03 Jacksonmills

Is anyone experiencing the similar animation problem with the accordion?

Mar 07 '25 00:03 danielchungdev

@danielchungdev did you try the css first replacement?

Mar 07 '25 00:03 Jacksonmills

@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

Mar 07 '25 00:03 danielchungdev

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?

Mar 09 '25 12:03 meisamtj81

Does anyone know what cause this issue and how to fix it?

It's because of the transition from Tailwind v3 to v4. The tailwindcss-animate package used by shadcn components doesn't support v4 yet. Actually, support for it may never land considering that library hasn't been maintained for over 2 years and the maintainer seems unresponsive to PRs. See https://github.com/jamiebuilds/tailwindcss-animate/pull/63.

Mar 15 '25 10:03 sleeyax