Is it possible to use `@apply` in tailwindcss for keyframes?

Question

I need to apply the following entering and leaving animation

They are presented using tailwindcss classes

      Entering: "transform ease-out duration-300 transition"
        From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        To: "translate-y-0 opacity-100 sm:translate-x-0"
      Leaving: "transition ease-in duration-100"
        From: "opacity-100"
        To: "opacity-0"

I tried to use the following but doesn't seem to work.

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .alt-pop {
    animation: alt-pop-enter, alt-pop-leave;
  }
  @keyframes alt-pop-enter {
    @apply transform ease-out duration-300 transition;
    from { @apply translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2; }
    to   { @apply translate-y-0 opacity-100 sm:translate-x-0; }
  }
  @keyframes alt-pop-leave {
    @apply transition ease-in duration-100;
    from { @apply opacity-100; }
    to   { @apply opacity-0; }
  }
}

My suspicions are that:

1. keyframes doesn't work with @apply
2. keyframes work exclusively with from and to, so cannot add extra css styles within the keyframe

How do I use css as much as possible to setup this entering and leaving animation instead of JS?

And how do I use tailwindcss classes as much as possible?

And how do I set the delay before switching from entering to leaving?

One approach I can think of is convert all the tailwind classes back to the actual tailwind then write my own keyframes and animation css class.

Is there a better approach than this?

Answer 1

The recommended approach

The approach recommended in the documentation inorder to define custom animations you would require to define @keyframes and animation properties in tailwind.config.js file and apply via the animate-my-animation-name class.

The above approach requires you to mostly use the conventional CSSinstead of tailwind classes. But coming back to your original requirements,

How do I use css as much as possible to setup this entering and leaving animation instead of JS?

And how do I use tailwindcss classes as much as possible?

Yes, you can achieve this by mostly using tailwind classes using the following approach.

Using @apply in @keyframes

First let's try solving your suspicions

My suspicions are that:

1. keyframes doesn't work with @apply
2. keyframes work exclusively with from and to, so cannot add extra css styles within the keyframe

According to the docs for the @apply directive,

Use @apply to inline any existing utility classes into your own custom CSS.

When we are defining a @keyframes rule, the CSS styling is applied within from and to blocks in order to define styles for the waypoints within the animation. So your animation style definition would look like this.

@keyframes alt-pop-enter {
  from {
    @apply translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2;
  }
  to {
    @apply translate-y-0 opacity-100 sm:translate-x-0;
  }
}
@keyframes alt-pop-leave {
  from {
    @apply opacity-100;
  }
  to {
    @apply opacity-0;
  }
}

Error in applying animation

The following lines in your code is invalid when applying CSS animations.

@apply transform ease-out duration-300 transition;
@apply transition ease-in duration-100;

You seem to have tried to use transition property inside @keyframes together. In CSS animation and transition are two different ways to animate an object. You can read more here. As mentioned in MDN docs above

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

Also note that the property transform class isn't required in tailwind Version 3 since the transform values such as rotate, scale, etc are applied via individual styles such as rotate-1 and scale-50 instead of adjusting tailwind variables as in version 2

Fixing the animation

Now since we are having two separate animations to be defined, we need to use a custom CSS property to extract a separate class. We can make use of animation shorthand property. For our purpose, the order of animation property values would look like this

duration | easing-function | delay | name, duration | easing-function | delay | name

Here is how it would look in CSS code

.alt-pop {
   animation: 300ms ease-out alt-pop-enter, 100ms ease-in 500ms alt-pop-leave;
}

Notice we add an extra 500ms value to animation for it to delay by 500ms after the animation has started. This includes 300ms for the initial animation to occur and then another 00ms pause before the second animation inititaes. Then you can apply the class to HTML element and use as required

<div class="alt-pop">Content</div>

Here is a link to the solved animation: https://play.tailwindcss.com/uLgEAAd5Of?file=css