De CSS Grid a Tailwind
grid-template-columns: repeat(3, 1fr) → grid-cols-3. Pistas personalizadas usan valores arbitrarios.
Las rejillas regulares se convierten sin sorpresas: grid-template-columns: repeat(3, 1fr) equivale a grid-cols-3. Cuando las pistas mezclan unidades o tamaños fijos, la conversión pasa por valores arbitrarios que ya no se leen tan bien. Y las cuadrículas con áreas nombradas suelen quedarse en CSS, donde el código original explica mejor la intención.
Plantillas explícitas
grid-template-columns con fr fijos suele mapear a grid-cols-*. Fracciones raras o minmax complejo piden brackets o CSS.
Áreas con nombre
grid-template-areas casi nunca es 1:1 a utilidades. Mantén áreas en CSS o simplifica el markup.
Gap y auto-flow
gap-* y grid-flow-* cubren mucho del día a día sin tocar filas/columnas a mano.
Probar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.