De CSS Grid para Tailwind
grid-template-columns: repeat(3, 1fr) → grid-cols-3. Tracks personalizados usam valores arbitrários.
As grelhas regulares migram sem sobressaltos: grid-template-columns: repeat(3, 1fr) corresponde a grid-cols-3. Quando as faixas misturam unidades ou larguras fixas, a conversão obriga a valores arbitrários, que se tornam difíceis de ler. Já as grelhas com áreas nomeadas costumam ficar melhor no ficheiro CSS original.
Templates explícitos
grid-template-columns com fr fixos costuma mapear para grid-cols-*. Frações raras ou minmax complexo pedem brackets ou CSS.
Áreas com nome
grid-template-areas quase nunca é 1:1 para utilitários. Mantenha áreas em CSS ou simplifique o markup.
Gap e auto-flow
gap-* e grid-flow-* cobrem muito do dia a dia sem tocar linhas/colunas à mão.
Experimentar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confiança: verifique o resultado visualmente. O conversor é um rascunho para developers.