Step 1 - Tailwind 기본 클래스

1. 색상 (Color)

bg-blue-500, text-white
bg-red-500, text-white
bg-green-500, text-white
bg-gray-200, text-gray-800

💡 색상 이름-숫자 조합: blue-500, red-300, gray-100 등

2. 간격 (Spacing)

p-2 (padding 작게)
p-4 (padding 중간)
p-8 (padding 크게)
px-8 py-2 (좌우, 상하 다르게)

💡 p: padding, m: margin, x: 좌우, y: 상하

3. 크기 (Sizing)

w-1/4 (25%)
w-1/2 (50%)
w-3/4 (75%)
w-full (100%)

💡 w: width (너비), h: height (높이)

4. 테두리 & 그림자

border
border-2 (두껍게)
border rounded
border rounded-lg
shadow
shadow-lg (큰 그림자)

5. 텍스트 (Text)

text-sm (작은 글자)
text-base (기본 크기)
text-lg (큰 글자)
text-xl (더 큰 글자)
text-2xl (아주 큰 글자)
font-normal (보통)
font-bold (굵게)
text-left (왼쪽 정렬)
text-center (중앙 정렬)
text-right (오른쪽 정렬)

✏️ 직접 해보기

이 영역의 클래스를 바꿔보세요! (개발자 도구 열기: F12)

이 박스의 색상을 바꿔보세요!
← 목차로 다음: Flexbox 연습 →