기존 방식: .btn { background: blue; } 클래스를 정의하고 HTML에서 적용한다.
Tailwind 방식: class="bg-blue-500 text-white"와 같이 이미 정의된 클래스를 조합한다.
2. Sizing
2.1. Width
클래스
값
w-{n}
spacing 스케일 (w-4 = 16px)
w-full
100%
w-screen
100vw
w-auto
auto
w-1/2, w-1/3, w-2/3
50%, 33.3%, 66.6%
w-1/4, w-3/4
25%, 75%
w-[200px]
임의값
min-w-0, min-w-full
최솟값
max-w-sm ~ max-w-7xl
최댓값 (sm=24rem~)
2.2. Height
클래스
값
h-{n}
spacing 스케일
h-full
100%
h-screen
100vh
h-auto
auto
min-h-screen
min-height: 100vh
min-h-0
min-height: 0
h-dvh
100dvh (동적 뷰포트)
h-svh
100svh (소형 뷰포트)
2.3. size 단축 클래스
클래스
값
size-10
w-10 h-10
size-[200px]
w-200px h-200px
// 1단계: w-full, h-16 — 고정 크기
<div className="w-full">가로 100%</div>
<div className="h-16">높이 64px</div>
// 2단계: 비율 — 부모 기준 백분율
<div className="w-1/2">부모의 50%</div>
<div className="w-1/3">부모의 33%</div>
<div className="w-2/3">부모의 66%</div>
// 3단계: max-w — 최대 너비 제한 (반응형에 자주 사용)
<div className="w-full max-w-xl">최대 576px까지만</div>
<div className="w-full max-w-4xl mx-auto">최대 너비 + 가운데 정렬</div>
// 4단계: size — 가로·세로 동시 지정
<div className="size-10">40x40</div>
<div className="size-16">64x64</div>
<div className="size-[200px]">200x200</div>
// 1단계: text-size — 글자 크기
<p className="text-sm">작은 텍스트 (14px)</p>
<p className="text-base">기본 텍스트 (16px)</p>
<p className="text-xl">큰 텍스트 (20px)</p>
<p className="text-4xl">제목용 텍스트 (36px)</p>
// 5단계: truncate / line-clamp — 넘치는 텍스트 처리
<p className="truncate">한 줄을 넘으면 말줄임표로 잘림...</p>
<p className="line-clamp-2">두 줄을 넘으면 잘림. 긴 텍스트 긴 텍스트 긴 텍스트 긴 텍스트...</p>
4. Backgrounds — 배경
4.1. 기본 색상 팔레트
Tailwind의 색상은 색상명-숫자 형태이다. 숫자가 클수록 어두워진다 (50 가장 밝음, 950 가장 어두움).
hover:scale-105만 쓰면 애니메이션이 없음 → transition-transform duration-300 필수
opacity-0 group-hover:opacity-100을 쓸 때 부모에 group 클래스 빠뜨리지 않기
fixed 헤더가 있으면 main에 pt-{헤더높이} 필수 (겹침 방지)
6. Layout — 레이아웃 (Display · Position)
6.1. Display
클래스
CSS
설명
block
display: block
블록 요소
inline
display: inline
인라인 요소
inline-block
display: inline-block
인라인 블록
flex
display: flex
플렉스 컨테이너
inline-flex
display: inline-flex
인라인 플렉스
grid
display: grid
그리드 컨테이너
hidden
display: none
숨김
<div className="block">block — 한 줄 전체를 차지</div>
<span className="inline">inline — 내용 크기만큼, 줄바꿈 없음</span>
<span className="inline-block">inline-block — 줄바꿈 없이 나란히</span>
<div className="hidden">hidden — 화면에서 완전히 사라짐</div>
6.2. Position
클래스
CSS
static
position: static
relative
position: relative
absolute
position: absolute
fixed
position: fixed
sticky
position: sticky
6.3. 위치 지정 (inset)
클래스
의미
top-0
위에서 0
left-0
왼쪽에서 0
inset-0
상하좌우 모두 0
inset-x-0
좌우만 0
inset-y-0
상하만 0
// 1단계: relative — 자식의 기준점 역할
<div className="relative">
기준이 되는 부모
</div>
// 2단계: absolute + top/left — 부모 기준으로 위치 지정
<div className="relative">
<div className="absolute top-0 left-0">왼쪽 위에 배치</div>
<div className="absolute top-0 right-0">오른쪽 위에 배치</div>
</div>
// 3단계: inset-0 — 부모 전체를 꽉 채움
<div className="relative">
<div className="absolute inset-0">부모 전체 크기로 채움</div>
</div>
// 4단계: fixed — 스크롤해도 화면에 고정
<header className="fixed top-0 left-0">스크롤해도 고정되는 헤더</header>
// 5단계: sticky — 스크롤 시 특정 위치에 달라붙음
<h2 className="sticky top-0">스크롤하면 상단에 고정되는 제목</h2>
6.4. z-index
// 숫자가 클수록 위에 표시됨
<div className="z-0">맨 아래</div>
<div className="z-10">그 위</div>
<div className="z-50">가장 위</div>
7. Flexbox
가장 많이 쓰는 레이아웃 방식. 방향, 줄바꿈, 자식 크기를 클래스 조합으로 제어한다.
7.1. 방향 (flex-direction)
클래스
CSS
flex-row
flex-direction: row (기본값)
flex-row-reverse
flex-direction: row-reverse
flex-col
flex-direction: column
flex-col-reverse
flex-direction: column-reverse
7.2. 줄바꿈 · 자식 크기
/* 줄바꿈 */
flex-wrap flex-nowrap flex-wrap-reverse
/* 자식 요소 크기 제어 */
flex-1 /* flex: 1 1 0% — 공간을 균등 분할 */
flex-auto /* flex: 1 1 auto */
flex-none /* flex: none — 크기 고정 */
/* 개별 크기 */
grow /* flex-grow: 1 */
grow-0 /* flex-grow: 0 */
shrink /* flex-shrink: 1 */
shrink-0 /* flex-shrink: 0 */
col-span-2 /* 열 2칸 차지 */
col-span-full /* 전체 열 차지 */
row-span-2 /* 행 2칸 차지 */
// 1단계: grid + grid-cols — 열 개수 지정
<div className="grid grid-cols-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
// 2단계: gap — 셀 사이 간격 추가
<div className="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// 3단계: col-span — 특정 셀이 여러 칸을 차지
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2">넓은 셀 (2칸)</div>
<div>1칸</div>
<div>1칸</div>
<div className="col-span-full">전체 너비 셀</div>
</div>
// 4단계: 반응형 — 화면 크기에 따라 열 수 변경
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{movies.map(movie => (
<MovieCard key={movie.id} movie={movie} />
))}
</div>
9. Alignment — 정렬 (Justify · Align)
Flexbox와 Grid에서 아이템을 정렬하는 유틸리티이다.
9.1. 주축 정렬 (justify-content)
클래스
CSS
justify-start
justify-content: flex-start
justify-center
justify-content: center
justify-end
justify-content: flex-end
justify-between
justify-content: space-between
justify-around
justify-content: space-around
justify-evenly
justify-content: space-evenly
9.2. 교차축 정렬 (align-items)
클래스
CSS
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
items-stretch
align-items: stretch
items-baseline
align-items: baseline
9.3. Grid 정렬
place-items-center /* align-items + justify-items: center */
place-content-center
// 1단계: justify-center — 가로 중앙 정렬
<div className="flex justify-center">
<div>가운데 배치됨</div>
</div>
// 2단계: justify-between — 양 끝으로 배치
<div className="flex justify-between">
<div>왼쪽</div>
<div>오른쪽</div>
</div>
// 3단계: items-center — 세로 중앙 정렬
<div className="flex items-center">
<div>세로 중앙에 배치됨</div>
</div>
// 4단계: justify + items 조합 — 완전 중앙
<div className="flex justify-center items-center">
<div>정중앙에 배치됨</div>
</div>
// 5단계: place-items-center — grid에서 셀 안 정중앙
<div className="grid grid-cols-3 place-items-center">
<div>★</div>
<div>★</div>
<div>★</div>
</div>
// 4단계: transition + transform — 부드러운 변형
<div className="transition-transform duration-300 hover:scale-110">
호버 시 서서히 확대
</div>
<div className="transition-transform duration-300 hover:-translate-y-1">
호버 시 서서히 위로 이동
</div>
// 5단계: grid-cols 반응형 — 화면 크기에 따라 열 수 변경
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>카드 1</div>
<div>카드 2</div>
<div>카드 3</div>
<div>카드 4</div>
</div>
17. Dark Mode
17.1. 설정 (media 모드 — OS 자동)
// OS 다크모드 설정에 따라 자동 전환
<div className="bg-white dark:bg-gray-900">
라이트: 흰 배경 / 다크: 어두운 배경
</div>
17.2. 수동 토글 방식 (class 모드)
/* src/index.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
// HTML 루트에 dark 클래스 추가/제거로 제어
document.documentElement.classList.toggle('dark')
// 1단계: dark: 텍스트 색상
<p className="text-black dark:text-white">라이트: 검은색 / 다크: 흰색</p>
<p className="text-gray-700 dark:text-gray-300">라이트: 진한 회색 / 다크: 밝은 회색</p>
// 2단계: dark: 배경 색상
<div className="bg-white dark:bg-gray-900">라이트: 흰 배경 / 다크: 어두운 배경</div>
<div className="bg-gray-100 dark:bg-gray-800">라이트: 밝은 회색 / 다크: 짙은 회색</div>
// 3단계: 텍스트 + 배경 조합
<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
다크모드 대응 카드
</div>
