tailwindlabs/tailwindcss-jit

Keyframes malformed when using animation utilities with `@apply`

adamwathan opened this issue · 5 comments

adamwathan commented

When you use @apply with any of the animation utilities, the keyframe children are missing their selectors:

/* Input */
@tailwind utilities;

@layer utilities {
  .foo {
    @apply animate-spin;
  }
}

/* Output */
.foo {
  animation: spin 1s linear infinite
}

@keyframes spin {
   {
    transform: rotate(360deg)
  }
}

The actual @keyframes rule is generated later in the output than I would expect as well — I'd think it would come first.

g0shed commented

@adamwathan any idea when this will be fixed? amazing work with JIT by the way

adamwathan commented

Maybe Monday if I'm lucky, but I'm about to have a newborn baby any day now so hard to say.

g0shed commented

@adamwathan really? me too... a week or so until it pops 😂 and congratulations by the way!

adamwathan commented

Fixed (thanks @thecrypticace!) will be out in next release! @g0shed sounds like my kid might show up today, good luck to you and congratulations as well! 🥳

  • 🎉1
g0shed commented

@adamwathan my kid might show until friday, welcome to the sleep deprived nights 😂

  • 😄1