State Variants & Animations

State Variants & Animations

Tailwind handles all CSS pseudo-classes as variants. Interactive states are just prefixes.

Hover and Focus

<button className="
  bg-amber-500 text-white
  hover:bg-amber-600 active:bg-amber-700
  focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2
  transition-colors duration-150
  px-4 py-2 rounded-lg font-medium
  disabled:opacity-50 disabled:cursor-not-allowed
">
  Start Course
</button>

Transition and Animation

// Smooth hover on a card
<div className="
  bg-white border border-gray-200 rounded-xl p-6
  hover:shadow-lg hover:-translate-y-1
  transition-all duration-200 ease-out
  cursor-pointer
">
  <h3>{course.title}</h3>
</div>

// Fade in
<div className="opacity-0 animate-fade-in">

// Pulse skeleton
<div className="bg-gray-200 animate-pulse rounded h-4 w-48" />

Group Hover (Parent -> Child)

<div className="group relative overflow-hidden rounded-xl">
  <img src="/thumb.jpg" className="
    w-full transition-transform duration-300
    group-hover:scale-105
  " />
  <div className="
    absolute inset-0 bg-black/0
    group-hover:bg-black/40
    transition-colors duration-300
    flex items-center justify-center
  ">
    <span className="
      text-white opacity-0
      group-hover:opacity-100
      transition-opacity duration-300
    ">View Course</span>
  </div>
</div>

Peer (Sibling State)

<div className="relative">
  <input
    type="text"
    placeholder=" "
    className="peer border-b-2 border-gray-300 focus:border-amber-500 pt-4 pb-1 w-full bg-transparent"
  />
  <label className="
    absolute left-0 top-4 text-gray-400
    peer-focus:top-0 peer-focus:text-xs peer-focus:text-amber-500
    peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:text-xs
    transition-all duration-150
  ">Name</label>
</div>