Tailwind CSS home page
  1. Customization
  2. 커스텀 화면 설정

커스텀 화면 설정

프로젝트의 브레이크포인트는 tailwind.config.js 파일의 theme.screens 섹션에서 정의합니다. 키는 반응형 수정자가 되고(예: md:text-center), 값은 해당 브레이크포인트가 시작되는 min-width입니다.

기본 브레이크포인트는 일반적인 기기 해상도를 참고하여 설정되었습니다:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

프로젝트에 필요한 만큼 브레이크포인트를 추가하거나 줄일 수 있으며, 원하는 방식으로 이름을 지정할 수 있습니다.

기본값 재정의하기

기본 브레이크포인트를 완전히 교체하려면, theme 키 아래에 직접 커스텀 screens 설정을 추가하세요:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

재정의하지 않은 기본 스크린(예: 위 예제에서 xl)은 제거되며, 스크린 수정자로 사용할 수 없게 됩니다.

단일 화면 크기 재정의하기

lg와 같은 단일 화면 크기를 재정의하려면, theme.extend 키 아래에 커스텀 screens 값을 추가하세요:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

이렇게 하면 해당 브레이크포인트의 기본 값이 지정한 값으로 대체됩니다.

새로운 브레이크포인트 추가하기

새로운 브레이크포인트를 추가하는 가장 쉬운 방법은 extend 키를 사용하는 것입니다:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}

Tailwind는 자동으로 브레이크포인트를 정렬하여 더 작은 브레이크포인트가 먼저 삽입되고, 더 큰 브레이크포인트가 끝에 추가되도록 합니다.

커스텀 화면 이름 사용하기

여러분은 커스텀 화면 이름을 원하는 대로 지정할 수 있으며, Tailwind가 기본적으로 사용하는 sm/md/lg/xl/2xl 규칙을 따를 필요가 없습니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

여러분의 반응형 수정자는 이 커스텀 화면 이름을 반영하므로, HTML에서 사용할 때는 다음과 같이 작성할 수 있습니다.

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>