How to set animation duration?

[nikolailehbrink]

Hi there!
I tried to set an animation duration with Tailwind's native duration property like I did in tailwindcss-animate. However this doesn't seem to work. The slide-in-form-top works. Am I missing something on my end?

<menu
  className="flex animate-in items-center gap-2 rounded-full border
    border-muted bg-white/5 p-2 shadow-md backdrop-blur-xl duration-500
    slide-in-from-top-6"
>
...
</menu>

The variable is defined...

but animate-in doesn't seem to grab it.

[Wombosvideo]

This looks like a weird bug. I will look into this

[nikolailehbrink]

Hmm, okay that's wierd! I am also using Vite with React-Router-7, I do some testing on my own aswell!

[Wombosvideo]

Check out the latest version to see if the problem is fixed for you as well. I added inline intuitively without really thinking of it, but that seems to have been the fix.

[nikolailehbrink]

I installed the latest version, but all the issues persist—nothing seems to have changed. I suspect a problem in your CI pipeline. The source code looks correct, but the CSS files in /dist are still from the old version and don't include the inline option.

/dist (outdated code)

/src (updated code)

I saw you made a change to the CI 13 hours ago, but didn't release that, could that fix the issue?

[Wombosvideo]

Good catch, and very embarrassing on my end. Yes, there were CI issues so I decided to publish to NPM from the CLI directly but I didn't remember to run build before publish...

[nikolailehbrink]

No worries!
Just glad that you reply fast and fix those errors almost in an instant! Thank you!

[Wombosvideo]

Check again, I just pushed a new version. And yes, responding quickly is important for stuff that is used by a bunch of people. I am always annoyed when I don't get responses within a few days.