중앙 정렬 + 최대 폭 제한 레이아웃

위와 같은 레이아웃에서는 스크린의 가로 너비에 따라

최적의 가독성과 레이아웃 안전성을 제공하기 위해, 다음과 같은 원칙을 따른다.

• 스크린의 가로 너비에 따라 내부 콘텐츠와 마진이 유동적으로 변한다.
  1. 화면 너비가 일정 이상일 경우
  → 콘텐츠 너비는 고정되고, 남는 영역은 좌우 마진(margin)으로 자동 배분
  2. 화면 너비가 작을 경우
  → 콘텐츠 너비가 화면에 맞게 줄어들며, 마진도 거의 없어집니다.

이 조건을 만족하는 TailwindCSS 레이아웃은 다음과 같다

<div className="mx-auto max-w-screen-xl">
  <h2 className="text-xl font-bold mb-4">Lorem Ipsum</h2>
</div>

부모 <div>에서 가로 너비의 최대길이를 설정(max-w-screen-xl) 한다,
스크린 너비가 일정값을 넘을 경우, 여백은 자동으로 margin으로 채워진다. (mx-auto)

주의
위 레이아웃이 의도대로 동작하려면,
부모 요소는 w-full 등으로 충분한 너비를 확보하고 있어야 한다.