Flexbox y Grid.
Referencia para distribución unidimensional y bidimensional.
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 |
|---|---|---|
| flex-basis / flex | Distribución flexible | Usar min-width: 0 en hijos que pueden truncar |
| flex-direction / wrap | Clusters y barras | Permitir wrap de acciones y etiquetas |
| flex-grow / shrink | Prioridades de tamaño | No encoger targets bajo mínimo táctil |
| order | Excepcional | No contradecir lectura o tabulación |
| grid-template-columns / rows | Layouts y colecciones | Usar minmax para evitar overflow |
| grid-column / row | Span explícito | El contenido sigue siendo legible sin grid |
| grid-auto-flow / columns / rows | Contenido dinámico | Evitar dense si altera orden percibido |
| gap | Separación entre hijos | Preferir sobre márgenes entre componentes |
| justify-* / align-* | Alineación | No centrar prosa o datos por decoración |
| place-* | Atajo de alineación | Usar cuando ambos ejes comparten intención |
Reglas de Style
- Flex para secuencias; Grid para relaciones en dos ejes.
- Probar labels y botones con texto largo.
- Las grillas de cards usan auto-fit o breakpoints explícitos.
- No usar order para reparar un DOM incorrecto.
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.