not all @keyframes included in generated output

[stefanprobst]

What version of Tailwind CSS are you using?

4.0.15

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

nextjs

What version of Node.js are you using?

22

What browser are you using?

firefox

What operating system are you using?

linux

Reproduction URL

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

Describe your issue

i am defining an animation in a @theme block which references two @keyframes by name. depending on the order, only one or both keyframes are included in the generated css:

@import "tailwindcss";

@theme {
  /* This adds only the "spin" keyframes to the generated css. */
  --animate-test: 1000ms ease-out 500ms both fade-in, 1000ms linear 500ms spin infinite;

  /* This adds both "spin" and "fade-in" keyframes to the generated css - the only difference is the order in which the two animations are listed. */
  /* --animate-test: 1000ms linear 500ms spin infinite, 1000ms ease-out 500ms both fade-in; */

  @keyframes fade-in {
    from { opacity: 0% }
    to { opacity: 100% }
  }
}

(see the playground link above)

[philipp-spiess]

Thank you for the repro! I pushed a fix onto the main branch. We plan to release this with the next patch version of Tailwind CSS soon. 👍