Bring your UI to life

Micro-interactions make your interfaces feel reactive and premium. Tailwind provides built-in utilities for transitions, transforms, and animations that require no keyframe writing or complex CSS.

1. Transitions

Transitions smoothly change properties over a duration instead of instantly flashing them.

• Choose property: transition-colors, transition-transform, transition-all, transition-opacity.
• Choose duration: duration-75 (75ms) up to duration-1000 (1s). duration-200 or duration-300 is best for standard interactions.
• Choose timing function: ease-in, ease-out, ease-in-out or ease-linear.

Example:

<button class="bg-teal-600 hover:bg-teal-500 text-white transition-colors duration-300 ease-in-out px-4 py-2 rounded-lg">
  Animate Color
</button>

2. Transforms

Transforms visual characteristics of elements (scale, rotation, translation).

• Scale: scale-95, scale-100, scale-105, scale-110.
• Rotate: rotate-45, rotate-90, hover:-rotate-3.
• Translate: translate-x-2, -translate-y-4.

Combine them with transitions to animate on hover:

<button class="bg-teal-600 hover:scale-105 active:scale-95 transition-transform duration-200 px-4 py-2 rounded-lg text-white">
  Button Bounce
</button>

3. Built-in Animations

Tailwind includes four utility animations that run infinitely:

Example of a skeleton loading card:

<div class="animate-pulse flex space-x-4">
  <div class="rounded-full bg-slate-200 h-10 w-10"></div>
  <div class="flex-1 space-y-6 py-1">
    <div class="h-2 bg-slate-200 rounded"></div>
    <div class="space-y-3">
      <div class="grid grid-cols-3 gap-4">
        <div class="h-2 bg-slate-200 rounded col-span-2"></div>
        <div class="h-2 bg-slate-200 rounded col-span-1"></div>
      </div>
    </div>
  </div>
</div>

Practice task

In the editor below:

1. Make the action button rotate slightly and scale on hover: add hover:scale-105 hover:rotate-1.
2. Add smooth transitions for all properties by adding transition-all duration-300 ease-out.
3. Give the icon loader at the top a spinning animation using animate-spin.