Tailwind CSS动画动态传递animation-delay变量失效问题

核心原因是Tailwind CSS的JIT（即时编译）引擎的静态类扫描机制：

• Tailwind默认只对代码中静态写死的类名进行扫描，生成对应的CSS规则。当你用变量（比如${delay}s）拼接类名时，JIT引擎无法在编译阶段提前预知变量的所有可能取值，所以不会主动为这些动态值生成对应的动画类。
• 0.1s、0.2s、0.3s这些值刚好匹配Tailwind内置的animation-delay预设值（对应100ms、200ms、300ms），这些预设值对应的类是Tailwind默认会生成的，所以即使通过变量传递，最终生成的类名刚好命中了已存在的预设规则，动画就能正常工作。
• 像0.4s、0.24s这类不在默认预设里的数值，因为JIT引擎没提前生成对应的CSS规则，即使你通过变量把值拼到类名里，浏览器找不到对应的样式，自然动画失效。
• 硬编码值时，Tailwind能直接扫描到这个具体数值，JIT引擎会为它生成对应的自定义动画类，所以动画正常。

内容的提问来源于stack exchange，提问作者Shehroz G Nabi