Define built-in Tailwind animations using individual properties

[brandonpittman]

I know you don't want to tackle complex animations, and if you're writing your own animations, you can kinda work around this with CSS custom properties, but at least for the built-in Tailwind animations, having them defined using separate properties, i.e. animation-name etc., consumers would be able to override things like animation-delay. I had to inline style a whole new animation prop because the Tailwind animation key wipes out the animation-delay key.

The best way I can think of to handle this in my own custom animation (using Tailwind's animation feature) is to define it like this:

animation: "spin 1s linear infinite var(--animation-delay)"

Then somewhere in my own code, I could set --animation-delay: someNumberInMs.

Now, if I'm writing my own animation in tailwind.config.js, that's okay, I guess, but the Tailwind default animations with a delay would require rewriting the whole animation definition.

In order to keep the one line definition, I propose a system being used that of transforms where animation utilities are defined as CSS custom properties.