Aprende a diseñar estados de interacción en Tailwind para que botones y enlaces respondan bien al usuario.
Un componente sin estados se ve bien en captura, pero falla en uso real.
Con Tailwind puedes definir hover, focus y active en la misma línea donde declaras el estilo base.
El punto profesional está en el foco de teclado: si no se ve, la accesibilidad cae en picado.
En esta lección construirás un botón con estados claros y un enlace con feedback visual limpio.
No es decoración: los estados comunican acción disponible, foco y confirmación de interacción.
hover indica que un elemento es interactivo cuando usas ratón.
focus y focus-visible son clave para navegación por teclado.
active da sensación de respuesta inmediata al hacer clic o pulsar Enter/Espacio.
Este patrón te sirve como punto de partida para casi cualquier CTA.
Empieza por el estilo base y luego añade estados en bloque para mantener claridad.
Si el estilo base no funciona, los estados no salvarán el componente.
Usa transition para suavizar cambios de color o sombra y evitar parpadeos duros.
Evita 8 estados distintos si no hay razón de producto: prioriza consistencia.
Aprende a diseñar estados de interacción en Tailwind para que botones y enlaces respondan bien al usuario.
Código del tema: Utilidades composables + responsive
No es decoración: los estados comunican acción disponible, foco y confirmación de interacción.
hover indica que un elemento es interactivo cuando usas ratón.
focus y focus-visible son clave para navegación por teclado.
active da sensación de respuesta inmediata al hacer clic o pulsar Enter/Espacio.
Este patrón te sirve como punto de partida para casi cualquier CTA.
<button class="rounded-lg bg-indigo-500 px-4 py-2 font-semibold text-white transition hover:bg-indigo-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 active:bg-indigo-600">Guardar cambios</button>Empieza por el estilo base y luego añade estados en bloque para mantener claridad.
Si el estilo base no funciona, los estados no salvarán el componente.
Usa transition para suavizar cambios de color o sombra y evitar parpadeos duros.
Evita 8 estados distintos si no hay razón de producto: prioriza consistencia.