Duration not working properly with arbitrary value

[maxhotzelt]

According to the Tailwind CSS documentation, the syntax for specifying arbitrary duration values in milliseconds should be duration-[2000ms]. However, upon attempting to utilize this syntax, I found that it doesn't seem to apply the transition duration correctly.

For instance, when using duration-[2000ms] to specify a duration of 2000 milliseconds, the transition does not apply at all.

Furthermore, I wanted to inquire whether the official documentation regarding the usage of custom duration values with milliseconds syntax is incorrect, or if this behavior is indeed a bug within Tailwind CSS. Alternatively, I'm open to help. I may be overlooking something or misusing the feature in some way. Clarification on this matter would be appreciated.

[alex-krasikau]

Hey @maxhotzelt!

I tested the arbitrary values implementation on Tailwind Play, and it works well: Tailwind Play - Arbitrary Values.

I noticed from the screenshots that you are using the tailwind-animate plugin. This plugin modifies tailwind transition utilities for animations. There is a bug affecting the use of arbitrary values, which has been reported in several open issues:

• Issue 50
• Issue 38
• Issue 35

To address this problem, I suggest two solutions:

1. Add any values used in the code to the tailwind config:

{
    ...
    theme: {
        extend: {
            transitionDuration: {
                "2000": "2000ms",
            },
        },
    }
    ...
}

2. Alternatively, use a fork that prefixes animation utilities with the anim- keyword. This may require adjustments in your codebase if you are already using keyframes animations. You can find more details in the comment by the fork author and in the fork itself.