Tailwind CSS: Container 유틸리티 사용 가이드

Container 유틸리티 기본 개념

container 클래스는 Tailwind CSS에서 제공하는 유틸리티 중 하나로, 콘텐츠를 특정 너비 내에 정렬하고 중앙에 배치하는 역할을 합니다. 기본적으로 container 클래스는 반응형 너비를 가지며, Tailwind CSS의 브레이크포인트에 따라 크기가 자동으로 조정됩니다.

 

<div class="container mx-auto">
  <!-- Content goes here -->
</div>

 

기본적으로 container 클래스는 Tailwind CSS의 기본 브레이크포인트에 따라 너비가 조정됩니다.

 

• sm (640px)

• md (768px)

• lg (1024px)

• xl (1280px)

• 2xl (1536px)

 

[Tailwind CSS: 반응형 디자인 가이드](https://www.kakao.gg/tech/frontend/666792d1e804326f08820f3e)

 

패딩 추가

컨테이너에 패딩을 추가하여 콘텐츠와 컨테이너 가장자리 사이에 여유 공간을 줄 수 있습니다.

<div class="container mx-auto px-4">
  <!-- Content goes here -->
</div>

위 코드에서 px-4 클래스는 컨테이너의 양쪽에 1rem(16px)의 패딩을 추가합니다.

 

사용 예시)

container 안쪽에 header, main, footer를 넣었기 때문에 3개 모두 container 너비로 조정됩니다.

<div class="container mx-auto p-4">
    <header class="bg-blue-500 text-white p-4">
      <h1 class="text-3xl">Tailwind CSS Container Example</h1>
    </header>
    <main class="mt-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-200 p-4">Column 1</div>
        <div class="bg-gray-300 p-4">Column 2</div>
        <div class="bg-gray-400 p-4">Column 3</div>
      </div>
    </main>
    <footer class="bg-blue-500 text-white p-4 mt-4">
      <p>&copy; 2024 Your Company</p>
    </footer>
</div>