Tailwind:Container
요소의 너비를 현재 Breakpoint에 고정하기 위한 구성 요소입니다.
container
Breakpoint | Properties |
None | |
sm (640px) | |
md (768px) | |
lg (1024px) | |
xl (1280px) | |
2xl (1536px) | |
Usage
container
클래스는 현재 중단점의 min-width
와 일치하도록 요소의 max-width
를 설정합니다. 이것은 완전히 유동적인 뷰포트를 수용하는 대신 고정된 화면 크기 세트를 디자인하려는 경우에 유용합니다.
다른 프레임워크에서 사용했을 수 있는 컨테이너와 달리 Tailwind의 컨테이너는 자동으로 중앙에 배치되지 않으며 기본 제공 수평 패딩이 없습니다.
컨테이너를 중앙에 배치하려면 다음 mx-auto
유틸리티를 사용하십시오:
수평 패딩을 추가하려면 다음 px-{size}
유틸리티를 사용하십시오.
반응형 변형
container
클래스에는 기본적으로 md:container
와 같은 반응형 변형도 포함되어 있어 특정 중단점 이상에서만 무언가가 컨테이너처럼 동작하도록 할 수 있습니다.
<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
<!-- ... -->
</div>