CSS Grid в Tailwind
grid-template-columns: repeat(3, 1fr) → grid-cols-3. Свои треки — через arbitrary values.
Равномерные сетки переносятся спокойно: grid-template-columns: repeat(3, 1fr) соответствует grid-cols-3. Как только дорожки смешивают разные единицы или фиксированные размеры, появляются произвольные значения, читать которые в разметке уже неудобно. Сетки с именованными областями обычно проще оставить в отдельном файле стилей и не переносить их насильно.
Явные шаблоны
grid-template-columns с фиксированными fr часто → grid-cols-*. Редкие доли или сложный minmax → brackets или CSS.
Именованные области
grid-template-areas почти никогда не 1:1 в утилиты. Оставьте areas в CSS или упростите разметку.
Gap и auto-flow
gap-* и grid-flow-* закрывают много повседневного без ручных строк/столбцов.
Попробовать
.example { display: flex; gap: 1rem; padding: 1rem; }Заметка о доверии: проверяйте результат визуально. Конвертер — черновик для разработчиков.