@apply seems does not working inside @keyframes

[didix16]

What version of Tailwind CSS are you using?

v4.0.0-beta.6

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

Vite 6.0.3

What version of Node.js are you using?

v20.9.0

What browser are you using?

Firefox, Brave

What operating system are you using?

Windows 11

Reproduction URL

Play Tailwindcss - https://play.tailwindcss.com/cprDoyBh5U?file=css

Describe your issue

After following the new changes mentioned on v4 docs, I've tried to add a new animation like this:

@import "tailwindcss";

@theme {
  --animate-pop: 1s ease-out alt-pop-enter, 500ms ease-in 1s alt-pop-leave;

  @keyframes alt-pop-enter {
    from {
      @apply bg-amber-400;
    }
    to {
      @apply bg-red-700;
    }
  }
  @keyframes alt-pop-leave {
    from {
      @apply bg-green-400;
    }
    to {
      @apply bg-blue-600;
    }
  }
}

It seems that does not processed the @apply rule and results in and empty animation keyframes.
Also, only the second @keyframes seems to be included, so the animate-pop does only executes alt-pop-leave, but not both.

EDIT:

BTW, I forgot to mention that if you try to use @apply inside @keyframes oustide @theme, i.e:

@keyframes example {
    from {
        @apply bg-red-400;
    }
    to {
        @apply bg-green-400;
    }
}

Then on the playgroud you get an error saying that you cannot use @apply inside @keyframes.
You can see the error here - https://play.tailwindcss.com/VcoeNIX3rT?file=css

I don't know why. In v3 was working fine. Also in the v4 docs, there's nothing that says to you that you cannot use @apply inside @keyframes.

[RobinMalfait]

Hey!

We simplified and restricted how @apply behaves in v4, I agree that we can make that more clear in the docs.

There are two issues going on here. First one is the @apply indeed does not work inside of keyframes because @apply has to operate on a selector which @keyframes don't have. You could argue that we can special case it (such that @apply bg-blue-500 does work), but there are other utilities that don't make sense at all. E.g.: @apply hover:bg-blue-500 which will never work because you can't use :hover in an @keyframes. Therefore we don't allow @apply at all.

The next issue is that @keyframes (when defined in a @theme) will only be included in your final CSS if they are used as an animation (by matching the name of the animation). In your case the animation name is pop, but the keyframes are named as alt-pop-enter and alt-pop-leave so they won't be processed nor included in your final CSS.

If you do have matching keyframes and animation names, then this means that you can do this:

@theme {
  --animate-example: 1s example infinite ease-in;

  @keyframes example {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

See: https://play.tailwindcss.com/jxMKkYtzwb?file=css

---

To solve your two problems, I would suggest you do this instead:

1. Define @keyframes outside of the @theme — this ensures that your keyframes are always included and not thrown away.
2. Use var(--color-red-500) instead of @apply — this ensures that you can still use your design tokens.

Moving the @keyframes outside means that they will always be present in your final CSS. In addition, they are now processed as well, which results in the error you've seen before: https://play.tailwindcss.com/MjFeF8UAMg?file=css

Next, you can use the available CSS variables to setup your animations. This still allows you to configure and change your colors later without changing the keyframes itself: https://play.tailwindcss.com/H3lYjPwfbP?file=css

Took some notes to improve the documentation, but I hope this helps 👍

[didix16]

Hi @RobinMalfait! Thanks for you fast reply. And thanks for the explanation, now it is more clear how to use it and understand what's going on. I'll keep on my mind. Thank you for taking notes into account to improve the docs!