[BUG] - Next UI Skeleton animation is doing conflict with tailwindcss-animate

[joler023]

NextUI Version

2.4.6

Describe the bug

When i'm using the skeleton component i notice that the animation is going way too fast, so i started to debug and i find that if i commented the tailwindcss-animate in plugins in the tailwind.config.ts the animation worked correctly.

Your Example Website or App

https://codesandbox.io/p/devbox/nextui-tailwindcss-animate-issue-y89x4c?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0dt1t630006356mmti2mhro%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0dt1t630002356m4cvfs1fd%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0dt1t630004356m33yuvxk6%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0dt1t630005356mkuyx6uhs%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0dt1t630002356m4cvfs1fd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0dt1t620001356mlcnqn8x0%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522cm0dt1t630002356m4cvfs1fd%2522%252C%2522activeTabId%2522%253A%2522cm0dt1t620001356mlcnqn8x0%2522%257D%252C%2522cm0dt1t630005356mkuyx6uhs%2522%253A%257B%2522id%2522%253A%2522cm0dt1t630005356mkuyx6uhs%2522%252C%2522activeTabId%2522%253A%2522cm0dt2a4k000u356mdcurg892%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cm0dt2a4k000u356mdcurg892%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0dt1t630004356m33yuvxk6%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0dt1t630003356myfly9pac%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522cm0dt1t630004356m33yuvxk6%2522%252C%2522activeTabId%2522%253A%2522cm0dt1t630003356myfly9pac%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to Reproduce the Bug or Issue

1. Install NextUI and set it up
2. Add a NextUI component (Skeleton in this case)
3. Install de dev dependecy "tailwindcss-animate" and add it to the plugins in tailwind.config.ts
4. After using the component the animation is going to go way faster than in the demo
5. If you comment the require line of "tailwindcss-animate" in the tailwind.config.ts and reload the page the animation is going to work perfectly

Expected behavior

The expected behavior is that the animation should go at the docs page speed

Screenshots or Videos

https://github.com/user-attachments/assets/a8498379-e16c-44a6-8d59-2a9898a1dcf9

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-1299 [BUG] - Next UI Skeleton animation is doing conflict with tailwindcss-animate

[prave01]

Hey thank you for making this repot!! Can you please assign this task to me

[TheAlexPorter]

I also am experiencing this bug. Would be nice to have sorted ❤️

[Malith-Rukshan]

Try adding !duration-1500 by classNames

Example:

<Skeleton className="w-full h-full rounded-lg"
                    classNames={{
                        base: "!duration-1500"
                    }}>
                    <div className="w-full h-full bg-default-300"></div>
 </Skeleton>

[wingkwong]

Closing - couldn't reproduce the issue with the sandbox code in the latest version (attached the versions below). I believe it was fixed in https://github.com/heroui-inc/heroui/pull/3217/commits/8228e3e96830a457f756a3be9192ad82201ef77b.

"@heroui/skeleton": "^2.2.14",
"@heroui/system": "^2.4.18",
"@heroui/theme": "^2.4.17",