Interactividad.
Las utilidades interactivas refuerzan controles nativos y no desactivan capacidades sin una razón explícita.
Referencia
Tailwind genera estas utilidades durante el build. Style fija los tokens aceptados, los defaults y las restricciones del grupo.
| Propiedad o familia | Uso en v10 | Criterio |
|---|---|---|
| accent-color | Checkbox, radio y range | Token accent con contraste |
| appearance | Control custom excepcional | Restituir foco, estado y forced colors |
| caret-color / color-scheme | Edición y controles nativos | Conectar al tema |
| cursor | Affordance secundaria | No sustituye semántica disabled |
| field-sizing | Textarea o input adaptable | Probar compatibilidad y límites |
| pointer-events | Capas decorativas | No simular disabled |
| resize | Textarea y panel | No impedir ampliar texto largo |
| scroll-behavior | Navegación contextual | Auto con reduced motion |
| scrollbar-color / width / gutter | Paneles con overflow | No ocultar scrollbar |
| scroll-margin / padding | Anclas y sticky header | El target queda visible |
| scroll-snap-* | Galerías opcionales | No atrapar lectura |
| touch-action | Mapas y gestos | Mantener zoom del navegador |
| user-select | Controles específicos | Texto y datos siguen copiables |
| will-change | Optimización temporal | No aplicar globalmente |
Reglas de Style
- No bloquear selección de texto.
- No esconder scrollbar en contenido importante.
- Las interacciones de puntero tienen equivalente de teclado.
- Mapa o canvas no captura todos los gestos de zoom.
Contrato de uso
- Usar utilidades para ajustes locales y prototipos acotados.
- Usar una clase semántica de Kit cuando el patrón se repite o tiene comportamiento.
- No construir clases dinámicamente; cada nombre debe aparecer completo en el código fuente.
- No usar valores arbitrarios para reemplazar un token que falta. Proponer primero el token.
- Verificar 320 px, 200% de zoom, tema oscuro y reducción de movimiento cuando aplique.