CSS Flexbox в Tailwind

display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.

Флекс-контейнеры переносятся почти дословно: display:flex даёт flex, flex-direction:column — flex-col, а justify-content:space-between — justify-between. Главное отличие в промежутках: gap:1rem превращается в gap-4 на контейнере, и это надёжнее, чем расставлять margin каждому потомку. Нестандартные выравнивания всё же стоит проверить вручную в реальном макете.

Display и направление

display:flex → flex; flex-direction:column → flex-col. Сначала контейнер, потом дети.

Выравнивание

justify-content:center → justify-center; align-items:center → items-center. Короткие имена, та же идея.

Gap против margin

При равномерном зазоре лучше gap-4 на контейнере, чем margin на каждом ребёнке.

Попробовать

Открыть конвертер

.example { display: flex; gap: 1rem; padding: 1rem; }

Заметка о доверии: проверяйте результат визуально. Конвертер — черновик для разработчиков.