v4 Regression: Keyframe animations defined in JS must be referred to using kebab case, even if defined in camelCase

[mattkrick]

What version of Tailwind CSS are you using?

v4.0.1

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

webpack 89.0

What version of Node.js are you using?

For example: v20.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

Probably just a documentation issue, but can make one if helpful

Describe your issue

My theme is defined in my config.js as follows

{
  theme: {
    keyframes: {
      slideUp: {
        from: {opacity: 0, transform: 'translate(-50%, -50%) translateY(32px) scale(0.96)'}
      }
    },
    animation: {
      slideUp: 'slideUp 200ms cubic-bezier(0, 0, 0.2, 1)',
    }
  }
} 

My legacy code references it using the name as defined, in camelCase:

<div className='animate-slideUp'></div> // worked in v3. doesn't work in v4!
<div className='animate-slide-up'></div> // works in v4!

I'm OK if this is working as intended, but it was a surprise when all my animations broke.
I suggest documenting it in the upgrade guide & maybe adding the rename codemod to the migrator so it doesn't surprise others.

Thank you so much for what you do ❤

[RobinMalfait]

Hey!

I would highly recommend to migrate your config (or at least this part) to CSS where this works as expected: https://play.tailwindcss.com/oHLU8VBhsF?file=css

But I am taking a look to see if we can make this work as-is.

[mattkrick]

Thank you, will do! You've made upgrading really easy, the only gotcha was knowing not knowing about the converted casing.