CSS 여백에서 Tailwind로

padding: 1.5rem은 p-6. 단축형은 방향 유틸리티로. 스케일 밖은 p-[13px].

여백은 마이그레이션에서 가장 먼저 손대기 좋습니다. padding: 1.5rem은 p-6이 되고 단축 표기는 방향별 유틸리티로 나뉩니다. 스케일에 없는 길이는 p-[13px] 같은 임의 값이 되니 직접 확인하세요.

스케일 vs 흩어진 rem

1.5rem은 대개 p-6입니다. 스케일 밖 13px는 p-[13px] 또는 토큰 재설계입니다. 맹목 반올림은 하지 마세요.

펼쳐지는 shorthand

margin: 1rem 2rem은 my-4 mx-8이 될 수 있습니다. PR 전에 각 변을 확인하세요.

레이아웃 간격

flex/grid의 gap-*로 자식 사이 고아 margin을 피하세요.

사용해보기

변환기 열기

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

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