Layout.
Referencia de flujo, posición, overflow y visibilidad.
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 |
|---|---|---|
| aspect-ratio | Medios y previews | Usar proporciones conocidas; conservar dimensiones intrínsecas |
| columns | Prosa editorial excepcional | No usar en formularios o lectura secuencial compleja |
| break-after / before / inside | Impresión y columnas | Probar exportación real |
| box-decoration-break | Fragmentos inline | Uso excepcional |
| box-sizing | Global border-box | Lo fija Preflight |
| display | Flujo y primitivas | Preferir block, flex y grid semánticos |
| float / clear | Contenido editorial heredado | No usar para layout de aplicación |
| isolation | Contextos de mezcla | Crear sólo si resuelve un conflicto concreto |
| object-fit / object-position | Imágenes y video | No recortar evidencia sin indicarlo |
| overflow / overscroll-behavior | Paneles y tablas | No ocultar foco ni contenido esencial |
| position / inset | Sticky, overlays y anclas | Absolute no reemplaza el flujo |
| visibility | Ocultar sin remover espacio | No usar para contenido que debe salir del árbol |
| z-index | Capas publicadas | Usar escala: base, sticky, overlay, modal, toast |
Reglas de Style
- El orden visual conserva el orden del DOM.
- Un sticky no cubre el foco ni el título de destino.
- Todo scroll interno tiene propósito y acceso por teclado.
- No fijar alturas de contenido textual.
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.