브레이크포인트
반응형 경계값. 커스텀 토큰을 만들지 않고 Tailwind 기본 브레이크포인트(sm·md·lg·xl·2xl)를 그대로 쓴다.
스케일 · min-width
기본0px
모바일. prefix 없는 스타일: 모든 너비의 바탕.
sm:640px
큰/가로 모바일.
md:768px
태블릿.
lg:1024px
노트북·작은 데스크톱.
xl:1280px
데스크톱.
2xl:1536px
큰 데스크톱.
왼쪽 박스는 대상 기기 비율(세로 모바일 → 가로 데스크톱). 값은 모두 min-width 기준.
모바일 우선 · mobile first
prefix 없는 스타일이 기본(모든 너비), prefix는 그 너비 이상에서만 덧붙는다. 그래서 모바일을 기본으로 짜고 화면이 커질 때 스타일을 더해 올린다: 줄여가지(down) 않는다.
// 모바일 1열 → 태블릿 2열 → 데스크톱 3열 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3" /> // 모바일에서 숨김 → md 이상에서 노출 <aside className="hidden md:block" />
md:flex = “768px 이상에서 flex”. 768px 미만에선 기본값 그대로.