box-sizing

box-sizing (박스 크기 계산 방식)

요소의 box-sizing 을 border-box 또는 content-box 로 설정해서 너비/높이 계산 시 테두리와 패딩을 포함할지 여부를 정하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

클래스	스타일
`box-border`	`box-sizing: border-box;`
`box-content`	`box-sizing: content-box;`

box-border 유틸리티는 요소의 box-sizing 을 border-box 로 설정해요. 그러면 너비나 높이를 줄 때 요소의 테두리(border)와 패딩(padding)이 함께 포함되도록 브라우저에 알려 줘요.

즉, 2px 테두리와 사방 4px 패딩을 가진 100px × 100px 요소는 100px × 100px 로 렌더링되고, 내부 콘텐츠 영역은 88px × 88px 가 돼요.

<div class="box-border size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

Tailwind는 preflight 기본 스타일에서 모든 요소에 이 방식을 기본값으로 적용해요.

box-content 유틸리티는 요소의 box-sizing 을 content-box 로 설정해요. 그러면 요소에 지정한 너비/높이 위에 테두리와 패딩이 더해지도록 브라우저에 알려 줘요.

즉, 2px 테두리와 사방 4px 패딩을 가진 100px × 100px 요소는 실제로는 112px × 112px 로 렌더링되고, 내부 콘텐츠 영역은 100px × 100px 가 돼요.

<div class="box-content size-32 border-4 p-4 ...">
  <!-- ... -->
</div>

box-sizing 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="box-content md:box-border ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.