Better states, plugin for Tailwind v4

README.md

Better hover/active states, Tailwind CSS

Preview:

example_states.mov

Tailwind Play link:

https://play.tailwindcss.com/7HbSJlaQGT

Use case: A card with main action and secondary action

example_card_with_actions.mov

HTML if the link is broken

<div class="grid gap-6 bg-slate-100 p-4">
  <h1>Use case: card with main link and other actions</h1>
  <div class="rounded-md border bg-white p-4">
    <div class="group/item relative flex items-center justify-between rounded-md border p-4 hovered-action:bg-blue-100 hovered-action:ring-2 hovered-action:ring-black pressed-action:bg-blue-600">
      <p class="font-bold group-hovered-action/item:text-blue-600 group-pressed-action/item:text-white">Mykolas Mankevicius</p>
      <div class="flex gap-4">
        <button type="button" class="peer z-10 block rounded border bg-white px-2 py-1 hovered:bg-red-50 hovered:text-red-900 pressed:bg-red-200">Remove</button>
        <button type="button" class="action block rounded border bg-slate-600 px-2 py-1 text-white before:absolute before:inset-0 hovered:bg-slate-900">View Profile</button>
        <div class="peer-hovered:bg-amber-50 peer-pressed:bg-amber-100">peer-pressed = bg-amber-100</div>
      </div>
    </div>
  </div>
</div>

app.css

@import "tailwindcss";

@custom-variant hovered {
  @media (hover: hover) {
    &:hover,
    &:focus-visible,
    &:has(:focus-visible) {
      @slot;
    }
  }
}

@custom-variant hovered-action {
  @media (hover: hover) {
    &:has(.action:hover),
    &:has(.action:focus-visible) {
      @slot;
    }
  }
}

@custom-variant pressed {
  @media (hover: hover) {
    &:active {
      @slot;
    }
  }
}
@custom-variant pressed-action {
  @media (hover: hover) {
    &:has(.action:active) {
      @slot;
    }
  }
}

index.html

<div class="grid gap-6 bg-slate-100 p-4">
  <h1>Use case: card with main link and other actions</h1>
  <div class="rounded-md border bg-white p-4">
    <div class="group/item relative flex items-center justify-between rounded-md border p-4 hovered-action:bg-blue-100 hovered-action:ring-2 hovered-action:ring-black pressed-action:bg-blue-600">
      <p class="font-bold group-hovered-action/item:text-blue-600 group-pressed-action/item:text-white">Mykolas Mankevicius</p>
      <div class="flex gap-4">
        <button type="button" class="peer z-10 block rounded border bg-white px-2 py-1 hovered:bg-red-50 hovered:text-red-900 pressed:bg-red-200">Remove</button>
        <button type="button" class="action block rounded border bg-slate-600 px-2 py-1 text-white before:absolute before:inset-0 hovered:bg-slate-900">View Profile</button>
        <div class="peer-hovered:bg-amber-50 peer-pressed:bg-amber-100">peer-pressed = bg-amber-100</div>
      </div>
    </div>
  </div>
</div>