Animation Names Won't Be Escaped If Prefix Contains Especial Characters

[eagostini]

What version of Tailwind CSS are you using?

v3.3.2

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

Tailwind Play

What version of Node.js are you using?

N/A

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/ojvPuQftlm

Describe your issue

Using the @ prefix in my configuration file will allow me to create animation utilities without escaping it, therefore not producing valid animations.

The link above allows you to test the same implementation with the animate-spin and @animate-spin utilities (by tweaking the prefix) to see that the output CSS does not escape the @spin animation.

[thecrypticace]

Hey! Thanks for reporting this one. We were escaping the animation names themselves but not the prefix. Oops.

I've merged the fix in #11470 and it'll be available in our next tagged release. In the meantime you can test the fix out via our insiders build (should be available in a few minutes):

npm install tailwindcss@insiders

[eagostini]

You guys are legends! Thank you heaps.