Custom animations with Tailwind

Lets say you want elements to animate in a special way (ex: fading). Here's how you can add a custom animation with Tailwind:

/* tailwind.css */

@theme {
  /* Name of class */
  --animate-fade: fade 0.24s ease-out;

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

Then add the class to any element:

<!-- template.html -->

<div class="animate-fadein">
  F-f-faded
</div>