Границы CSS в Tailwind

border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.

В Tailwind рамка описывается двумя частями: border задаёт толщину, а цвет назначается отдельной утилитой. Со скруглением проще — border-radius: 0.5rem соответствует rounded-lg. Тонкое место это состояние фокуса: Tailwind заменяет привычный контур собственными кольцами, и потеря индикатора сразу бьёт по доступности.

Ширина, стиль и цвет

border: 1px solid #e5e7eb часто border border-gray-200. Разделяйте стороны, если CSS неравномерен.

Радиусы

0.5rem → rounded-lg. Редкие брендовые радиусы → rounded-[…].

Outline фокуса

После конвертации проверьте focus-visible: многие a11y-регрессии живут на границе фокуса.

Попробовать

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

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

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