Utilidades · Interacción

States (variantes interactivas)

Aplica estilos en respuesta a hover, foco, activación y controles deshabilitados; también coordina elementos relacionados mediante group y peer.

v2.0

Siete contextos

Hover, focus, focus-visible, active, disabled, group y peer cubren los estados frecuentes.

Sintaxis explícita

El prefijo indica cuándo actúa la utilidad: hover:text-secondary.

Foco visible

Las variantes focus-visible conservan una señal clara para la navegación con teclado.

Código + resultado

Compara todas las familias de estado

Selecciona una opción y prueba el resultado con puntero, teclado o el control nativo correspondiente.

¿Cambia el propio elemento?Usa hover:, focus: o active:

¿El control no está disponible?Usa el atributo HTML y disabled:

¿Responde otro elemento?Usa group-* o peer-*

<a class="border hover:text-secondary hover:bg-muted hover:border-primary hover:opacity-75" href="#">
  Ver proyecto
</a>

Pasa el cursor sobre el control

Ver proyecto →

Opciones: texto primary, secondary, success, warning, danger, info, muted y text; fondo y borde admiten los siete colores semánticos; opacidad admite 50, 75 y 100.

<input class="border focus:outline-none focus:text-primary focus:bg-primary focus:border-primary" placeholder="Nombre">

Haz clic o usa Tab

Opciones: focus:outline-none, focus:text-primary, focus:bg-primary y focus:border-primary.

<button class="btn btn-primary focus-visible:outline-none focus-visible:ring-2">
  Continuar
</button>

Usa Tab para mostrar el anillo

Opciones: focus-visible:outline-none, focus-visible:ring y focus-visible:ring-2.

<button class="btn btn-primary active:scale-95 active:opacity-75 active:bg-primary">
  Confirmar
</button>

Mantén presionado el control

Opciones: active:scale-95, active:opacity-75 y active:bg-primary.

<button disabled class="btn btn-primary disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed">
  Procesando
</button>

Control no disponible

Opciones: disabled:opacity-30, disabled:opacity-50, disabled:pointer-events-none y disabled:cursor-not-allowed.

<article class="group">
  <strong class="group-hover:text-primary">Proyecto</strong>
  <span class="group-hover:bg-primary group-hover:border-primary group-hover:opacity-75">Ver detalle</span>
</article>

Pasa el cursor por toda la tarjeta

Proyecto residencialVer detalle →

Opciones: group, group-hover:text-primary, group-hover:bg-primary, group-hover:border-primary y group-hover:opacity-75.

<input id="terms" type="checkbox" class="peer">
<label for="terms" class="peer-checked:text-primary peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring">
  Acepto las condiciones
</label>

Marca la casilla o enfócala con Tab

Acepto las condiciones

Opciones: peer, tres variantes peer-checked:*, peer-focus:ring y peer-focus-visible:ring.

Puntero

Hover para color, fondo, borde y opacidad

El prefijo hover: aplica la declaración mientras el puntero permanece sobre el propio elemento.

hover:text-*TEXTO

Color tipográfico

<a class="hover:text-secondary" href="#">
  Ver proyecto
</a>

ResultadoVer proyecto →

Cambia el color sin modificar fondo ni borde.

hover:bg-*FONDO

Superficie interactiva

<button class="border hover:bg-primary hover:text-primary hover:border-primary">
  Guardar cambios
</button>

Resultado

bg-primary es una superficie clara; texto y borde primarios mantienen el contraste.

hover:border-*BORDE

Énfasis de contorno

<a class="border hover:border-info" href="#">
  Más información
</a>

ResultadoMás información →

Requiere que el elemento ya tenga estructura de borde.

hover:opacity-*OPACIDAD

Intensidad visual

<img class="hover:opacity-75"
  src="proyecto.jpg" alt="Proyecto">

Resultado

También admite hover:opacity-50 y hover:opacity-100.

Teclado y formularios

Focus y focus-visible cumplen funciones distintas

focus: responde a cualquier foco; focus-visible: limita la señal visual a los casos en que el navegador la considera necesaria.

Clase	Efecto	Uso recomendado
`focus:outline-none`	Elimina el outline nativo.	Sólo cuando se proporciona una alternativa visible.
`focus:text-primary`	Cambia el color del texto.	Enlaces y controles con etiqueta.
`focus:bg-primary`	Cambia el fondo.	Controles que necesitan énfasis adicional.
`focus:border-primary`	Cambia el color del borde.	Campos con borde previamente definido.
`focus-visible:ring`	Outline de 2px.	Navegación visible con teclado.
`focus-visible:ring-2`	Outline de 3px.	Énfasis reforzado en acciones principales.

No elimines el foco sin reemplazoSi utilizas focus-visible:outline-none, combínalo con focus-visible:ring o focus-visible:ring-2.

Respuesta y disponibilidad

Active y disabled

Active comunica la pulsación actual; disabled refleja controles nativos que no pueden ejecutarse.

active:scale-95ACTIVE

Escala al 95%

Produce una respuesta física breve durante la pulsación.

active:opacity-75ACTIVE

Opacidad al 75%

Reduce temporalmente la intensidad del control.

active:bg-primaryACTIVE

Fondo primario

Refuerza el estado presionado con color.

disabled:opacity-50DISABLED

Opacidad al 50%

Comunica indisponibilidad sin ocultar el control.

disabled:pointer-events-noneDISABLED

Sin eventos de puntero

Evita interacciones del puntero en un control deshabilitado.

disabled:cursor-not-allowedDISABLED

Cursor no permitido

Añade una pista visual; no reemplaza el atributo HTML disabled.

Referencia oficial

Clases disponibles

Esta tabla refleja el archivo fuente de la versión 2.0.0-alpha.2.

Familia	Clases disponibles
Hover · texto	`hover:text-primary`, `hover:text-secondary`, `hover:text-success`, `hover:text-warning`, `hover:text-danger`, `hover:text-info`, `hover:text-muted`, `hover:text`
Hover · fondo	`hover:bg-primary`, `hover:bg-secondary`, `hover:bg-success`, `hover:bg-warning`, `hover:bg-danger`, `hover:bg-info`, `hover:bg-muted`
Hover · borde	`hover:border-primary`, `hover:border-secondary`, `hover:border-success`, `hover:border-warning`, `hover:border-danger`, `hover:border-info`, `hover:border-muted`
Hover · opacidad	`hover:opacity-50`, `hover:opacity-75`, `hover:opacity-100`
Focus	`focus:outline-none`, `focus:text-primary`, `focus:bg-primary`, `focus:border-primary`
Focus visible	`focus-visible:outline-none`, `focus-visible:ring`, `focus-visible:ring-2`
Active	`active:scale-95`, `active:opacity-75`, `active:bg-primary`
Disabled	`disabled:opacity-50`, `disabled:opacity-30`, `disabled:pointer-events-none`, `disabled:cursor-not-allowed`
Group hover	`group`, `group-hover:text-primary`, `group-hover:bg-primary`, `group-hover:border-primary`, `group-hover:opacity-75`
Peer	`peer`, `peer-checked:text-primary`, `peer-checked:bg-primary`, `peer-checked:border-primary`, `peer-focus:ring`, `peer-focus-visible:ring`

Recomendaciones

Estados comprensibles y accesibles

No dependas sólo de hover

Toda acción debe funcionar también con teclado, tacto y tecnologías de asistencia.

Conserva el foco

Evita eliminar el outline si no añades una señal visible equivalente o superior.

Usa atributos nativos

disabled:* necesita el atributo disabled; la apariencia no sustituye la semántica.

Suaviza con intención

Combina estados con Transition y respeta siempre prefers-reduced-motion.