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: 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)
이 박스의 색상을 바꿔보세요!