// estados · hover, focus, group, peer
Tailwind tiene modificadores para cada pseudo-clase CSS. Interactúa con los demos para verlos en acción.
hover: · active: · transition
focus: — haz clic en los inputs
disabled:
group — hover en padre afecta hijos
Pasa el cursor por la tarjeta entera
peer — estado de hermano afecta siguiente
<!-- hover: active: -->
<button class="bg-rose-600
hover:bg-rose-500
active:bg-rose-700
transition-colors"></button>
<!-- focus: con ring -->
<input class="focus:outline-none
focus:border-blue-500
focus:ring-2
focus:ring-blue-500/20">
<!-- disabled: -->
<button disabled
class="disabled:opacity-30
disabled:cursor-not-allowed"></button>
<!-- group: padre marca hijos -->
<div class="group hover:bg-slate-800">
<p class="group-hover:text-blue-400"></p>
<span class="group-hover:translate-x-1"></span>
</div>
<!-- peer: hermano afecta al siguiente -->
<input class="peer" required>
<p class="hidden peer-invalid:block">
Error
</p>
<!-- checked: para inputs -->
<input type="checkbox" class="peer sr-only">
<label class="peer-checked:bg-blue-600"></label>
<!-- Otros estados útiles -->
<a class="visited:text-purple-500"></a>
<li class="first:mt-0 last:mb-0 odd:bg-slate-900"></li>
<p class="placeholder:text-slate-500"></p>
<!-- Combinar modificadores -->
<button class="md:hover:bg-blue-700"></button>
<div class="dark:hover:bg-slate-700"></div>