Add custom animations to Tailwind themes

This is so easy. Just update your tailwind.css file.

/* tailwind.css */

@theme {
  --animate-fadein: fadeIn 0.24s ease-in-out;

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

Then add the animate-fadein class to any element.

<!-- index.html -->

<div class="animate-fadein">
  Hello there
</div>