Variants

Apply utilities conditionally using variants.

Responsive

<div class="p-2 md:p-4 lg:p-8"></div>

State

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2">Save</button>

Group

<div class="group">
  <span class="opacity-60 group-hover:opacity-100">Item</span>
</div>

Peer

<input class="peer" />
<label class="peer-focus:text-blue-600">Label</label>