app--javascript--css--application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "animate.css/animate.css";

/* Utility classes for animation speeds */
$speeds: 100, 150, 200, 250, 300, 350, 400;
@each $speed in $speeds {
  .speed-#{$speed} {
    animation-duration: #{$speed}ms;
  }
}

// Here we apply TailwindUIs transform recommendation for opening a dropdown
@keyframes dropIn {
  from { @apply transform opacity-0 scale-95; }
  to { @apply transform opacity-100 scale-100; }
}

.dropIn {
  // Just add the animation-name as the speed will be adjusted
  // via the speed-* utility classes made above.
  animation-name: dropIn;
}

// Here we apply TailwindUIs transform recommendation for closing a dropdown
@keyframes dropOut {
  from { @apply transform opacity-100 scale-100; }
  to { @apply transform opacity-0 scale-95; }
}

.dropOut {
  animation-name: dropOut;
}

@keyframes wiggle {
  0% { transform: translate(2px, 0); }
  50% { transform: translate(-2px, 0); }
  100% { transform: translate(2px, 0); }
}

// Make the utility class notification so when an element is hover
// over it will "wiggle".
.hover-wiggle {
  &:hover {
    animation: wiggle 75ms;
    animation-timing-function: linear;
  }
}