Custom animations with more than 1 animation separeted by commas dont work

[Timber1900]

What version of Tailwind CSS are you using?

v2.2.4

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

Next.js 11.0.1

What version of Node.js are you using?

v16.4.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/si3enE3TvA

Describe your issue

On tailwind.config.js

theme: {
  extend: {
    animation: {
      issue: 'animation1, animation2',
    }
  }
}

adding multiple animations makes the keyframes disappear from the styled component which makes the animation not work

[Timber1900]

Relevant codepen with expected result
https://codepen.io/timber1900/pen/rNmwEvq?editors=1100

[mohitsinghs]

@Timber1900 Sounds like same problem as mine #4711. Combined animations are not being processed ( intentionally ? ) due to which keyframes are ignored. I tried #4802 but closed due to inaction. Defining animation along with keyframes in CSS should work for now.

[Timber1900]

I had a mistake in my reproduction repository and while I could have sworn it wasn't working when I created the issue as I was testing in another Tailwind Play it appears to now be working https://play.tailwindcss.com/5t0tNwzics

I'll be closing this issue as the problem appears to have fixed itself.

[Timber1900]

I'm reopening this issue because I found managed to reproduce the issue,

• Removing the animations of the other divs com the tailwind.config.js removes the keyframes from the css causing the animation to not work
  https://play.tailwindcss.com/mFR8PkYYKO?file=config

• But if we include them it now works
  https://play.tailwindcss.com/gso8V7sBOc?file=config

Therefore the issue is with tailwind not including the keyframes in the compiled css when the only animation using said keyframes includes multiple animations

[icidasset]

I'm seeing this issue too, keyframes are ignored when a , is used in the animation. Temporary workaround is to create animation-1 and animation-2 for keyframes-1 and keyframes-2 respectively (as opposed to animation: keyframes-1, keyframes-2), and then add those animation classes to the safelist.

[mohitsinghs]

@icidasset your workaround does help including keyframes but combined animations still does not work. Since animate- classes override each other, applying two classes causes last one to work unless we create and use a third class combining animations while keeping previous two.

[Alwinator]

Thanks for implementing @bradlc.

[adamwathan]

Will be fixed in the next patch release, hopefully Monday or Tuesday 👍 Thank you!

[juanilarregui]

I'm still having the same problem. My version is 2.2.15, mode: 'jit' in my tailwind.config.js.

[zzAIMoo]

Having the same problem here, Version 2.2.19 with jit mode selected

[Rock070]

Having the same problem here, 2022-01-10

[Bryuhn]

Im also still having this problem, 2022-11-25

[mverissimo]

This looks still happen, especially using CSS modules:

https://codesandbox.io/p/sandbox/css-modules-vczjci

Is it valid to reopen this issue, to investigate? @adamwathan

[xxKeefer]

i am having this issue, 21-03-23

[eggsforbacon]

This is in fact still happening as of august 2023