Tamaños.
Anchos y altos responden al contenido y al contenedor antes que al viewport.
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 |
|---|---|---|
| width / height | Dimensión explícita | Evitar height fija en contenido textual |
| min-width / max-width | Límites de componentes | Prosa, tablas y formularios tienen máximos propios |
| min-height / max-height | Targets y paneles | Scroll interno sólo con límite visible |
| inline-size / block-size | Direcciones lógicas | Preferidas en primitivas internacionales |
| min/max-inline-size | Lectura y contención | Prosa usa medida, no breakpoint |
| min/max-block-size | Estado vacío y overlays | No ocultar contenido desbordado |
Reglas de Style
- Usar min(100%, valor) para evitar overflow.
- No usar 100vw dentro de una página con scrollbar.
- Los íconos conservan proporción.
- Los targets interactivos respetan 44 por 44 px cuando el contexto lo permite.
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.