Tailwind animation is not working when passing animation-delay value through a variable

Question

I was working with tailwind animation and I needed to create a custom animation in tailwind. The issue is that when I try to pass the value for the animation-delay using a variable or array, the animation does not seems to work. It does seems to work just fine when I explicitly gives the animation delay value.

If you are thinking that the variable value is not being passed correctly I assure you that it is passing correctly I have even checked in the chrome dev tools that the animation class is being applied.

And the most weird thing happening is that when I pass delay value 0.1,0.2 or 0.3 from the variable it works just fine. But if I try using any other value lets say 0.4,0.24,etc it will not work.

This is a really strange and weird issue I am having and had spent over a day on it but still nothing.

Keep in mind Its not the main issue the issue is very vast and I try to sum up the issue in a very simple example so restrain yourself from giving other possible solution. I do have other solution but I need this to work to make my animations dynamic.

Here is the Code that will not work as i am passing delay value 0.4

function AnimationBox() {
  const delay = 0.4;
  return (
    <div
      className={`flex h-80 w-full animate-[slideIn_0.5s_${delay}s_both] bg-white`}
    ></div>
  );
}

export default AnimationBox;

Here is the Code that will work as i am passing delay value 0.2 (because values like 0.1, 0.2 and 0.3 works just fine)

function AnimationBox() {
  const delay = 0.2;
  return (
    <div
      className={`flex h-80 w-full animate-[slideIn_0.5s_${delay}s_both] bg-white`}
    ></div>
  );
}

export default AnimationBox;

Here is the Code that will also work as i am giving delay value explicitly and no matter the value it will work just fine.

function AnimationBox() {

  return (
    <div
      className={`flex h-80 w-full animate-[slideIn_0.5s_0.123s_both] bg-white`}
    ></div>
  );
}

export default AnimationBox;

I just need a reason why its not working and to understand what is thing behaviour.

Answer 1

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Some values work (like 0.1, 0.2) because you have some complete class names else where like animate-[slideIn_0.5s_0.1s_both] that don't use string interpolation and are written as-is. The usage with the string interpolation then "piggy-backs" off this, and thus purely coincidental that it works for these values.

To make it work, you could:

• Use the style attribute:

  <div
    className="… animate-[slideIn_0.5s_both] …"
    style={{ animationDelay: `${delay}s` }}
  >
  

• safelist the classes, if you have a limited number of known values:

  module.exports = {
    safelist: [
      'animate-[slideIn_0.5s_0.1s_both]',
      'animate-[slideIn_0.5s_0.2s_both]',
      'animate-[slideIn_0.5s_0.3s_both]',
      'animate-[slideIn_0.5s_0.4s_both]',
    ],
    // …
  ];