Migration to Tailwind V4: CSS Variables in --animate- theme variables do not resolve.

[Aurailus]

In Tailwind v3, I had a number of animations specified in the extend.animation config property that looked something like this, where CSS variables controlled the timing of the animation:

"bob": "bob var(--speed, 1s) ease-in-out infinite forwards"

When I migrated to Tailwind V4, I converted these to the @theme syntax like so:

@theme {
  --animate-bob: bob var(--speed, 1s) ease-in-out infinite forwards;
}

When I did this, the animation itself worked, but I was no longer able to control the animation by changing --speed on the elements that included the animation. I believe this is because the actual animation was being specified in the variable once at the top of the theme layer in the :root, and not in the animate-bob class itself as it was before in Tailwind V3.

For the time being, I've worked around this by simply converting my animate-bob class into a utility class as so:

@utility animate-bob {
  animation: bob var(--speed, 1s) ease-in-out infinite forwards;
}

This works for my purposes, but as this was a kind of unexpected gotcha of the migration and I assume was an unintended regression, I thought I should bring it to your attention.

I'm not actually sure how you would go about fixing this given the CSS-variable driven nature of tailwind v4. Perhaps by keeping the --animation-* variables around as reference for scripts / styles to reference, but copying the actual animation css into the animate-* classes instead of referencing it? Seems kinda hacky..

Thanks!

What version of Tailwind CSS are you using?

v4.1.5

What build tool (or framework if it abstracts the build tool) are you using?

Webpack 5.96.1 + PostCSS 8.4.48

What version of Node.js are you using?

v20.18.0

What browser are you using?

Chrome

What operating system are you using?

Arch Linux

Reproduction URL

https://play.tailwindcss.com/BNY1UyOM6m?file=css

Describe your issue

As you can see, the animation plays on both squares, but the red one (using the theme --animate variable) doesn't respect the --speed specified on the element, while the blue one does.

[wongjn]

Use the inline option with @theme: https://play.tailwindcss.com/OSasKuREHN?file=css

[Aurailus]

Wow, thank you for the timely response, had no idea this was a feature! Might be worth referencing in the Upgrade Guide on the site, as after a quick Ctrl+F I wasn't able to see any reference to it in there :)