커스텀 간격 설정

tailwind.config.js 파일의 theme 섹션에서 spacing 키를 사용하여 Tailwind의 기본 간격/크기 스케일을 커스터마이즈할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

기본적으로 간격 스케일은 padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, scrollPadding 등의 코어 플러그인에 상속됩니다.

​기본 간격 스케일 확장하기

테마 문서에서 설명한 것처럼, 기본 간격 스케일을 확장하려면 tailwind.config.js 파일의 theme.extend.spacing 섹션을 사용할 수 있습니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

이렇게 하면 p-13, m-15, h-128과 같은 클래스가 Tailwind의 기본 간격/크기 유틸리티에 추가로 생성됩니다.

​기본 간격 스케일 재정의하기

테마 문서에서 설명한 것처럼, 기본 간격 스케일을 재정의하려면 tailwind.config.js 파일의 theme.spacing 섹션을 사용하면 됩니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}

이렇게 하면 Tailwind의 기본 간격 스케일이 비활성화되고, 대신 p-sm, m-md, w-lg, h-xl과 같은 클래스가 생성됩니다.

​기본 간격 스케일

Tailwind는 기본적으로 넉넉하고 포괄적인 숫자 기반 간격 스케일을 제공합니다. 값은 비례적이므로, 예를 들어 16은 8의 두 배 간격을 의미합니다. 하나의 간격 단위는 0.25rem에 해당하며, 일반적인 브라우저에서 기본적으로 4px로 변환됩니다.