간격
여백·간격의 단위. Tailwind 4px 스케일(0.25rem 단위)을 쓰고, 그중 실제 쓰는 단계만 추린다.
스케일 · 4px 단위
14px
아이콘-텍스트 등 아주 좁은 틈.
1.56px
뱃지·작은 버튼 세로 패딩.
28px
기본 gap: 인라인 요소 사이.
2.510px
인풋·버튼 세로 패딩.
312px
컴포넌트 내부 패딩·행 간격.
416px
카드 패딩·섹션 내 요소 간격.
520px
넉넉한 카드 패딩.
624px
블록 사이 간격.
832px
큰 섹션 사이.
1248px
페이지 상하 여백.
숫자는 p- · px- · py- · m- · gap- 등과 결합: p-4 = 패딩 16px, gap-2 = 간격 8px.
원칙
- 4의 배수로 맞춘다. 어긋난 값(13px 같은)은 쓰지 않는다: 리듬이 깨진다.
- 가까운 것일수록 좁게. 관계 있는 요소는 작은 값(1~2), 다른 그룹과는 큰 값(6~8)으로 떼어 위계를 만든다.
- 반쪽 단계(1.5·2.5·3.5)는 컴포넌트 내부 패딩 미세 조정에만. 레이아웃엔 정수 단계를 쓴다.