Wrong keyframe keys when generationg CSS classes with JS

[Mastercuber]

What version of Tailwind CSS are you using?

For example: v3.0.15

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

postcss-cli 9.1.0, vite 2.7.13

What version of Node.js are you using?

16.13.2

What browser are you using?

Firefox

What operating system are you using?

Ubuntu 20.04

Reproduction URL

https://github.com/Mastercuber/tailwindcss-minimal-example

Describe your issue

In the config file tailwind.config.js I'm generating some animations with floating point numbers in the class name like this.
The generated animation classes looks good, but the @keyframe directives have a different value than the animation classes itself, though the exact same key is used for both.

The used class in the App is animate-zoom-2.5 to actually see it in the output and the generated css is here

Now I just use another key for the keyframe name.

[vitorrd]

Hey, @Mastercuber. What you're seeing there isn't the "wrong key" per se. Tailwind is mistakenly trying to prefix the "." in your animation value and keyframe name when it should instead be escaping them and then prefixing.
I will send the Tailwind team a PR to address this.