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.

[philipp-spiess]

@mattkrick With the latest version of the upgrade tool, the animate-slideUp class will now be changed to animate-slide-up to account for the change in casing. I hope this helps a bit here. I agree that for the JS config based approach this is still unexpected but fixing this is not trivial since we don't have an allow-list for what theme keys to convert from camelCase to kebab-case and which ones don't. Happy to review a PR for that but that PR but I don't think it's likely something we'll focus on in the near future.