tailwind animating letters

index.html

<div class="h-screen grid items-center justify-center">
  <div class="text-8xl animate-chars"> 
    <span>e</span>
    <span>d</span>
    <span>d</span>
    <span>i</span>
    <span>e</span>
  </div>
</div>

index.tailwind.css

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

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

@keyframes slideDown {
  from { transform: translateX(0) translateY(-10px); }
  to { transform: translateX(0) translateY(0); }
}

.animate-chars {
  span {
    display: inline-flex;
    opacity: 0;
    animation-delay: calc(0.2s * var(--d));
    animation:
      fadeIn 0.8s ease-out forwards,
      slideDown 0.8s ease-out forwards;;

    &:nth-child(1) { --d: 0; }
    &:nth-child(2) { --d: 1; }
    &:nth-child(3) { --d: 2; }
    &:nth-child(4) { --d: 3; }
    &:nth-child(5) { --d: 4; }
  }
}