Tailwind permite aplicar estilos en estados como :hover, :focus, :active, entre otros, utilizando prefijos antes de las clases. AquĆ tienes una tabla comparativa con los equivalentes en CSS tradicional.
| Pseudo-clase | Clase Tailwind | CSS Tradicional | Ejemplo |
|---|---|---|---|
| :hover | hover:bg-blue-500 | element:hover { background-color: #3b82f6; } | |
| :focus | focus:outline-none | input:focus { outline: none; } | |
| :active | active:bg-red-500 | button:active { background-color: #ef4444; } | |
| :visited | visited:text-red-500 | a:visited { color: #ef4444 ; } | Enlace visitado |
| :disabled | disabled:opacity-50 | button:disabled { opacity: 0.5; } | |
| :checked | checked:ring-green-500 | input:checked{--tw-ring-color: #22c55e ;} | |
| :focus-visible | focus-visible:ring-2 | input:focus-visible { box-shadow: 0 0 0 2px #60a5fa; } |