[TailwindCSS] container width 커스텀하기

Tailwind CSS에서 container 클래스를 사용시 기본적으로 각 뷰포트 크기마다 미리 정의된 너비를 설정하고 있다..
추가로 원하는 대로 커스터마이즈할 수 있있는데, 가운데 정렬이나 패딩도 적용할 수 있다.

이 기본 설정을 커스터마이즈하려면 tailwind.config.js 파일에서 container 설정을 수정하면 된다.

tailwindcss.config.js에 container 설정 추가

프로젝트의 루트 디렉토리에 있는 tailwind.config.js. 만약 이 파일이 없다면, npx tailwindcss init 명령어를 사용하여 생성한다.
theme 섹션 아래에 container 설정을 추가하여 각 뷰포트 크기별로 container의 최대 너비를 설정할 수 있다.

[커스텀 예시]

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
      screens: {
        sm: '100%', // sm(640px) 이하
        md: '768px', // md(768px) 이하
        lg: '1024px', // lg(1024px) 이하
        xl: '1280px', // xl(1280px) 이하
        '2xl': '1536px', // 2xl(1536px) 이하
      },
    },
  },
  plugins: [],
};
export default config;

옵션 설명

• center: true: 컨테이너 가운데 정렬.
• padding: '1rem': 컨테이너에 1rem의 패딩 추가
• screens 키 아래에 각 뷰포트 크기별 최대 너비 지정

TailwindCSS 다시 빌드

설정을 변경한 후에는 TailwindCSS를 다시 빌드해야 변경 사항이 적용됨
npx tailwindcss build -o output.css