Tailwind CSS에서 더 나은 컨테이너를 작성하는 방법

HyperUI 전체에서 콘텐츠를 포함하는 데 사용되는 클래스max-w-screen-xl mx-auto px-4를 볼 수 있으며 이는 웹 사이트 및 구성 요소에서 볼 수 있습니다.

궁금해하시는 분들이 계실텐데...

Why not use the .container class?

좋은 질문입니다.

Tailwind CSS 웹사이트에서 .container 클래스documentation를 살펴보겠습니다.

보시다시피 다양한 중단점에서 크기max-width를 제공하므로 중단점에 도달하면 컨테이너 내의 콘텐츠가 해당 크기로 스냅됩니다.

Container Example

미리보기를 축소/확장하면 컨테이너 스냅 내 콘텐츠가 표시됩니다.

더 유동적인 용기

다음은 동일한 미리 보기이지만 이 블로그 게시물의 시작 부분에서 언급한 클래스를 사용합니다.

Fluid Example

보다 유동적인 것을 볼 수 있듯이 max-w-screen-xl가 더 이상 적용되지 않는 중단점에 도달한 다음 콘텐츠를 포함하기 위해 패딩이 사용됩니다. 완전한 유체 컨테이너를 원하는 경우 max-w-screen-xl 클래스를 제거할 수 있습니다.

두 가지를 비교해 봅시다.

Container vs Fluid Example
.container 접근 방식에 대한 논쟁은 콘텐츠가 더 큰 화면에서 더 넓지만 이를 해결하려면 max-w-screen-2xl 대신 max-w-screen-xl를 사용할 수 있습니다.

구성 편집 및 적은 코드 작성

마지막 참고 사항은 .container 접근 방식을 사용하고 있고 container mx-auto를 많이 작성하는 경우 다음을 수행할 수 있습니다.

theme: {
  container: {
    center: true,

    // Optional
    padding: {
      DEFAULT: '1rem',
      sm: '1.5rem',
      lg: '2rem'
    }
  },
}

재미있는 사실은 2021년에 .container 를 사용하는 것보다 max-w-screen-xl 접근 방식을 주장하는 블로그 게시물을 썼는데 여전히 읽을 수 있습니다.

How to Write Better Tailwind CSS Containers - 2021