Customization
프로젝트의 기본 중단점(breakpoints)을 커스터마이징하는 방법.
프로젝트의 브레이크포인트는 tailwind.config.js
파일의 theme.screens
섹션에서 정의합니다. 키는 반응형 수정자가 되고(예: md:text-center
), 값은 해당 브레이크포인트가 시작되는 min-width
입니다.
기본 브레이크포인트는 일반적인 기기 해상도를 참고하여 설정되었습니다:
/** @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
설정을 추가하세요:
/** @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
값을 추가하세요:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
screens: {
'lg': '992px',
// => @media (min-width: 992px) { ... }
},
},
},
}
이렇게 하면 해당 브레이크포인트의 기본 값이 지정한 값으로 대체됩니다.
새로운 브레이크포인트를 추가하는 가장 쉬운 방법은 extend
키를 사용하는 것입니다:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
screens: {
'3xl': '1600px',
},
},
},
plugins: [],
}
Tailwind는 자동으로 브레이크포인트를 정렬하여 더 작은 브레이크포인트가 먼저 삽입되고, 더 큰 브레이크포인트가 끝에 추가되도록 합니다.
여러분은 커스텀 화면 이름을 원하는 대로 지정할 수 있으며, Tailwind가 기본적으로 사용하는 sm
/md
/lg
/xl
/2xl
규칙을 따를 필요가 없습니다.
/** @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>