Tailwind의 sm, md, lg 단위 기준기준이 되는 디바이스 크기들반응형 개발Mobile-First 개발 방식sm은 보통 생략해요기본값(모바일), md(태블릿), lg(노트북&데스크탑)
Tailwind의 sm, md, lg 단위 기준
Tailwind에서 기본적으로 제공하는 단위들은 다음과 같다.
Tailwind 단위 | 최소 너비(px) | 일반적인 사용 사례 |
sm | 640px | 작은 태블릿, 큰 스마트폰 (iPhone Pro Max, Pixel 8 Pro 등) |
md | 768px | 태블릿 (iPad Mini, iPad Air 등) |
lg | 1024px | 작은 노트북 (MacBook Air 13", iPad Pro 가로 모드 등) |
xl | 1280px | 데스크탑 (Full HD 모니터) |
2xl | 1536px | 대형 모니터 (QHD, 4K 모니터) |
기준이 되는 디바이스 크기들
이 단위들은 일반적인 기기 분포를 기준으로 정해졌다.
예를 들면:
즉, Tailwind의 기본 반응형 단위들은 대부분의 웹사이트가 대응해야 하는 주요 디바이스의 화면 너비를 반영한 값들이다.
반응형 개발
Mobile-First 개발 방식
- 기본 스타일을 모바일 화면(작은 화면) 기준으로 작성
- 화면이 커질수록(
min-width기준) 스타일을 추가
- 작은 화면에서도 기본적으로 동작하도록 설계
<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500"> 반응형 박스 </div>
sm은 보통 생략해요
모바일 우선 개발방식에 의해 아무런 설정을 하지 않은 스타일링이 모바일을 위한 스타일링이다.
sm도 모바일 기종을 위한 수치인데, 모바일 기기 중 640px 이상이 애매한 경우가 많다.
스마트폰 화면 너비를 보면:
- iPhone 14 Pro Max → 430px
- Galaxy S23 Ultra → 412px
- Pixel 8 Pro → 412px
- iPad Mini → 768px (
md기준)
즉, 스마트폰 중 640px 이상을 가진 기기는 거의 없고, 태블릿(
md)으로 바로 넘어감.sm(640px 이상)은 모바일 기본 스타일을 그대로 사용하면 되는 경우가 많아서 상대적으로 덜 쓰임.그래서 모바일에서 스타일을 조정할 때는 보통
sm은 생략하고 md부터 작성하는 경우가 많다.기본값(모바일), md(태블릿), lg(노트북&데스크탑)
- 스마트폰: 360~480px (작은 스마트폰) (mobile-first 접근방식으로 별도의 설정을 하지 않음.)
- 큰 스마트폰들은
sm을 640px로 설정해서 대응 (보통 생략함)
- 태블릿: 768px (iPad 기준) →
md를 768px로 설정
- 노트북 & 데스크탑: 1024px 이상 →
lg를 1024px로 설정