Container

​Basic usage

​컨테이너 사용하기

container 클래스는 엘리먼트의 max-width를 현재 브레이크포인트의 min-width와 일치하도록 설정합니다. 이는 완전히 유동적인 뷰포트를 고려하는 대신, 고정된 화면 크기로 디자인하고 싶을 때 유용합니다.

다른 프레임워크에서 사용했던 컨테이너와 달리, Tailwind의 컨테이너는 자동으로 가운데 정렬되지 않으며, 기본적으로 수평 패딩이 없습니다.

컨테이너를 가운데 정렬하려면 mx-auto 유틸리티를 사용하세요:

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

수평 패딩을 추가하려면 px-* 유틸리티를 사용하세요:

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

기본적으로 컨테이너를 가운데 정렬하거나 기본 수평 패딩을 포함하고 싶다면, 아래의 커스터마이징 옵션을 참고하세요.

​Applying conditionally

​반응형 변형

container 클래스는 기본적으로 md:container와 같은 반응형 변형을 포함합니다. 이를 통해 특정 중단점(breakpoint) 이상에서만 컨테이너처럼 동작하도록 만들 수 있습니다.

<!-- `md` 중단점까지는 전체 너비로 유동적이며, 이후에는 컨테이너로 고정 -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

​Customizing

​기본적으로 중앙 정렬하기

컨테이너를 기본적으로 중앙에 정렬하려면, 설정 파일의 theme.container 섹션에서 center 옵션을 true로 설정하세요:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

​수평 패딩 추가하기

기본적으로 수평 패딩을 추가하려면, 설정 파일의 theme.container 섹션에서 padding 옵션을 사용해 원하는 패딩 양을 지정합니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

각 브레이크포인트마다 다른 패딩 양을 지정하고 싶다면, 객체를 사용해 default 값과 브레이크포인트별 오버라이드를 제공합니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};