container 클래스는 반응형 웹 디자인을 위한 그리드 시스템을 제공하며, 내부에 있는 콘텐츠를 중앙에 배치할 수 있도록 해줍니다.

이 클래스는 웹 페이지의 전체 너비를 사용하지 않고, 일부 공간을 비워 두는 것으로 컨텐츠의 가독성을 높일 수 있습니다.

mx-auto 클래스는 부모 요소의 가로 방향 중앙에 자식 요소를 배치합니다.

이 클래스는 margin-left와 margin-right 속성을 모두 auto로 설정하여 가로 방향으로 중앙 정렬합니다.

<div class="container mx-auto">
  <h1 class="text-3xl font-bold">Hello, World!</h1>
  <p class="text-lg">This is an example of using Tailwind CSS classes.</p>
</div>