toast-ease/src/styles.css

An opinionated toast component.

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

@layer components {
  .toast {
    --animation-duration: 3s;

    @apply w-full p-3 bg-white border rounded ml-auto mt-2 max-w-xs;

    animation-name: toastAnimation;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-duration: var(--animation-duration);
  }

  @keyframes toastAnimation {
    0% {
      opacity: 0;
      max-height: 0.75rem;
    }

    5% {
      opacity: 1;
      max-height: 100px;
    }
  }
}