Tailwind CSS에서 컨테이너 구성 요소를 사용자 지정하는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.

컨테이너는 웹 사이트를 개발할 때 사용할 가장 중요한 레이아웃 도구 중 하나이며, 콘텐츠를 특정 너비로 ​​제한하고 일반적으로 중단점에 따라 다르며 소금의 가치가 있는 모든 CSS 프레임워크에는 컨테이너 구성 요소가 있습니다. 고맙게도 Tailwind CSS is no exception .

기본 사용자화

Tailwind는 사용자 지정을 위한 몇 가지 기본 옵션을 제공합니다.

센터링

다음과 같이 center 속성을 true 로 설정하여 컨테이너를 항상 수평 중앙에 배치할 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
};

수평 패딩

일반적으로 컨테이너에 약간의 패딩이 필요합니다. 그렇지 않으면 콘텐츠가 특정 화면 크기에서 화면에 표시됩니다. Tailwind를 사용하면 다음과 같이 범용 패딩을 정의할 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: "2rem",
    },
  },
};

다음과 같이 화면 크기/중단점별로 사용자 지정할 수도 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "5rem",
        "2xl": "6rem",
      },
    },
  },
};

코드에 표시되는 sm , lg 등은 screens 속성에서 정의한 것과 동일해야 합니다.

예를 들어 기본값screens을 다음과 같이 변경하는 경우:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      mobile: "640px",
      tablet: "960px",
      desktop: "1280px",
    },
  },
};

그런 다음 컨테이너의 패딩은 다음과 같아야 합니다.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: "1rem",
        mobile: "2rem",
        tablet: "4rem",
        desktop: "5rem",
      },
    },
  },
};

화면과 다른 값 사용

container 값에서 screens 중단점을 분리하려는 몇 가지 경우가 있습니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

문서화되지 않은container.screens 재산

Tailwind CSS의 컨테이너 코드는 기본적으로 전역container.screens으로 돌아가기 전에 실제로 screens 속성을 호출합니다. 코드here를 볼 수 있습니다.

이를 기반으로 위의 Tailwind 구성 예를 사용하여 다음과 같이 할 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      mobile: "640px",
      tablet: "960px",
      desktop: "1280px",
    },
    container: {
      screens: {
        mobile: "600px",
        tablet: "900px",
        desktop: "1200px",
      },
    },
  },
};

맞춤 CSS

더 많은 유연성이 필요한 경우 고유한 사용자 정의container 클래스를 생성할 수도 있습니다.

// your CSS file
@layer components {
  .container {
    @apply mobile:max-w-[600px] tablet:max-w-[900px] desktop:max-w-[1200px];
  }
}

특정 중단점에서 컨테이너 비활성화

때때로 콘텐츠가 컨테이너의 레이아웃을 벗어나 특정 중단점에 대해 "액체"또는 전체 너비가 되기를 원할 수 있습니다. 이것은 몇 가지 편리한 클래스로 확실히 가능합니다.

예를 들어 md에 있는 컨테이너를 유동적으로 만들고 lg 이상에서 정적 상태로 돌아가려면 다음과 같은 방법으로 수행할 수 있습니다.

<div class="container w-full md:max-w-none lg:container">
  <!-- content -->
</div>

기본적으로 컨테이너의 max-width를 md로 재설정하여 전체 너비가 되도록 하고 lg에서 컨테이너를 다시 활성화합니다.

이전 버전에서 컨테이너 비활성화

Tailwind CSS의 이전 버전에서는 컨테이너 구성 요소를 사용할 계획이 없다면 다음과 같이 하면 됩니다.

// tailwind.config.js
module.exports = {
  theme: {
    container: false,
  },
};

그리고 컨테이너와 관련된 모든 CSS를 제거합니다.

그러나 v3부터는 마크업에서 container 클래스를 사용하는 경우에만 컨테이너의 CSS가 추가되기 때문에 이 작업을 수행할 필요가 없습니다.


바로 이 분들을 위한 것입니다! Tailwind CSS의 container 구성 요소를 사용하여 보다 편안하게 작업하시기 바랍니다.