최대 너비

최대 너비 (Max Width)

요소의 최대 너비를 정하는 유틸리티예요. CSS의 max-width 속성을 조절해 요소가 특정 너비 이상으로 커지지 않도록 제한해요.

출처: 문서

본문

클래스와 스타일

  • max-w-<number> — max-width: calc(var(--spacing) * <number>);
  • max-w-<fraction> — max-width: calc(<fraction> * 100%);
  • max-w-3xs — max-width: var(--container-3xs); /* 16rem (256px) */
  • max-w-2xs — max-width: var(--container-2xs); /* 18rem (288px) */
  • max-w-xs — max-width: var(--container-xs); /* 20rem (320px) */
  • max-w-sm — max-width: var(--container-sm); /* 24rem (384px) */
  • max-w-md — max-width: var(--container-md); /* 28rem (448px) */
  • max-w-lg — max-width: var(--container-lg); /* 32rem (512px) */
  • max-w-xl — max-width: var(--container-xl); /* 36rem (576px) */
  • max-w-2xl — max-width: var(--container-2xl); /* 42rem (672px) */
  • max-w-3xl — max-width: var(--container-3xl); /* 48rem (768px) */
  • max-w-4xl — max-width: var(--container-4xl); /* 56rem (896px) */
  • max-w-5xl — max-width: var(--container-5xl); /* 64rem (1024px) */
  • max-w-6xl — max-width: var(--container-6xl); /* 72rem (1152px) */
  • max-w-7xl — max-width: var(--container-7xl); /* 80rem (1280px) */
  • max-w-none — max-width: none;
  • max-w-px — max-width: 1px;
  • max-w-full — max-width: 100%;
  • max-w-dvw — max-width: 100dvw;
  • max-w-dvh — max-width: 100dvh;
  • max-w-lvw — max-width: 100lvw;
  • max-w-lvh — max-width: 100lvh;
  • max-w-svw — max-width: 100svw;
  • max-w-svh — max-width: 100svh;
  • max-w-screen — max-width: 100vw;
  • max-w-min — max-width: min-content;
  • max-w-max — max-width: max-content;
  • max-w-fit — max-width: fit-content;
  • container — width: 100%; + 각 브레이크포인트에서 max-width 설정
@media (width >= 40rem) { max-width: 40rem; }
@media (width >= 48rem) { max-width: 48rem; }
@media (width >= 64rem) { max-width: 64rem; }
@media (width >= 80rem) { max-width: 80rem; }
@media (width >= 96rem) { max-width: 96rem; }
  • max-w-(<custom-property>) — max-width: var(<custom-property>);
  • max-w-[<value>] — max-width: <value>;

기본 예제

max-w-<number> 유틸리티(예: max-w-24, max-w-64)를 쓰면 스페이싱 스케일(spacing scale)에 기반해 요소의 최대 너비를 고정값으로 정할 수 있어요.

<div class="w-full max-w-96 ...">max-w-96</div>
<div class="w-full max-w-80 ...">max-w-80</div>
<div class="w-full max-w-64 ...">max-w-64</div>
<div class="w-full max-w-48 ...">max-w-48</div>
<div class="w-full max-w-40 ...">max-w-40</div>
<div class="w-full max-w-32 ...">max-w-32</div>
<div class="w-full max-w-24 ...">max-w-24</div>

백분율 사용하기

max-w-full 또는 max-w-<fraction> 유틸리티(예: max-w-1/2, max-w-2/5)를 쓰면 요소의 최대 너비를 백분율 기반으로 정할 수 있어요.

<div class="w-full max-w-9/10 ...">max-w-9/10</div>
<div class="w-full max-w-3/4 ...">max-w-3/4</div>
<div class="w-full max-w-1/2 ...">max-w-1/2</div>
<div class="w-full max-w-1/3 ...">max-w-1/3</div>

컨테이너 스케일 사용하기

max-w-sm이나 max-w-xl 같은 유틸리티를 쓰면 컨테이너 스케일(container scale)에 기반해 요소의 최대 너비를 고정값으로 정할 수 있어요.

<div class="max-w-md ...">
  <!-- ... -->
</div>

브레이크포인트 컨테이너 사용하기

container 유틸리티를 쓰면 요소의 최대 너비를 현재 브레이크포인트의 min-width에 맞출 수 있어요. 완전히 유동적인 뷰포트 대신 고정된 화면 크기 집합을 기준으로 디자인하고 싶을 때 유용해요.

<div class="container">
  <!-- ... -->
</div>

다른 프레임워크에서 써봤을 컨테이너와 달리, Tailwind의 컨테이너는 스스로 가운데 정렬되지 않고 기본 가로 패딩도 없어요. 이건 mx-auto와 px-<number> 유틸리티로 추가해 주세요.

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

커스텀 값 사용하기

max-w-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 최대 너비를 정할 수 있어요.

<div class="max-w-[220px] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 max-w-(<custom-property>) 문법도 사용할 수 있어요.

<div class="max-w-(--my-max-width) ...">
  <!-- ... -->
</div>

이건 max-w-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

max-width 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="max-w-sm md:max-w-lg ...">
  <!-- ... -->
</div>

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

테마 커스터마이징

max-w-<number> 유틸리티는 --spacing 테마 변수에 의해 제어되며, 이 변수는 자신의 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일을 커스터마이즈하는 방법은 theme variable 문서에서 더 알아보세요.

더 알아보기 (Learn more)