Tailwind:Container

요소의 너비를 현재 Breakpoint에 고정하기 위한 구성 요소입니다.

container

container 클래스는 현재 중단점의 min-width와 일치하도록 요소의 max-width를 설정합니다. 이것은 완전히 유동적인 뷰포트를 수용하는 대신 고정된 화면 크기 세트를 디자인하려는 경우에 유용합니다.

다른 프레임워크에서 사용했을 수 있는 컨테이너와 달리 Tailwind의 컨테이너는 자동으로 중앙에 배치되지 않으며 기본 제공 수평 패딩이 없습니다.

컨테이너를 중앙에 배치하려면 다음 mx-auto유틸리티를 사용하십시오:

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

수평 패딩을 추가하려면 다음 px-{size}유틸리티를 사용하십시오.

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

container 클래스에는 기본적으로 md:container와 같은 반응형 변형도 포함되어 있어 특정 중단점 이상에서만 무언가가 컨테이너처럼 동작하도록 할 수 있습니다.

<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>