CSS 테두리에서 Tailwind로

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

Tailwind에서 테두리는 두 조각입니다. border가 두께를, 별도 유틸리티가 색을 맡고 border-radius: 0.5rem은 rounded-lg가 됩니다. 포커스 표시는 링으로 바뀌니 꼭 확인하세요.

너비·스타일·색

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; }

신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.