Animation Delay Property in Tailwind CSS V4

For whatever reason, tailwind v4 does not come with a built-in property for animation-delay (at least at the time of this writing). There is a property delay-<number>, but this is only for transition-delay. This is unfortunate for making staggered animations with arbitrary delays, but thankfully there’s an easy way to implement it yourself.

Implementation

Using the new @utility feature introduced in v4, we can easily make a new property such as anim-delay to use instead of the transition one. Add the following code to your css file:

/* app.css */
@utility anim-delay-* {
  animation-delay: calc(--value(integer) * 1ms)
}

Now you can use this in your markup!

<a href='/blog' class="anim-grow anim-delay-400 active:translate-y-0.5">Blog posts</a>

The only downside of this method is that the output code will have a redundant calc in it, so it would be better if tailwind added an official version. In the mean time, this method will work just fine.