1. 크기 (Sizing)
- h- → 높이(height)
- w- → 너비(width)
- h-[값] → 사이즈 임의 설정
- size- → 높이 + 너비
- w-1/2 → 너비 50%
- w-1/3 → 너비 33.33%
- w-1/4 → 너비 25%
- w-screen → 화면 전체 너비
- h-screen → 화면 전체 높이
- w-full → 너비 100%
- h-full → 높이 100%
- max-w-md → 최대 너비 28rem
2. 여백 (Spacing)
패딩 (Padding)
- p-0 → 패딩 없음
- p-1 → 0.25rem 패딩
- p-2 → 0.5rem 패딩
- p-4 → 1rem 패딩
- pt- → padding-top
- pb- → padding-bottom
- py-4 → 위아래(y축) 패딩(padding top & bottom) 1rem
- px-4 → 양옆(x축) 패딩(padding left & right) 1rem
마진 (Margin)
- m-0 → 마진 없음
- m-1 → 0.25rem 마진
- m-2 → 0.5rem 마진
- m-4 → 1rem 마진
- mt- → margin-top
- mb- → margin-bottom
- mx-4 → 수평 마진 1rem
- my-4 → 수직 마진 1rem
3. 레이아웃 (Layout)
- flex → Flexbox 레이아웃 (display: flex)
- flex-col → flex-direction: column
- justify-center → Flexbox 중앙 정렬 (가로)
- items-center → Flexbox 중앙 정렬 (세로)
- grid → Grid 레이아웃
- block → 블록 요소
- inline-block → 인라인 블록 요소
- hidden → 화면에서 숨김
4. 색상 (Colors)
텍스트 색상
- text-black → 검정색
- text-white → 흰색
- text-gray-500 → 회색 (500은 명도 단계)
- text-red-500 → 빨간색
배경 색상 (Background Colors)
- bg-색상 → 배경색(background-color)
- bg-[색상] → 색상 임의 설정
- bg-black → 검정색 배경
- bg-white → 흰색 배경
- bg-gray-100 → 아주 밝은 회색
- bg-gray-500 → 중간 회색
- bg-red-500 → 빨간색 배경
5. 폰트
폰트 크기 (Font Size)
- text-xs → Extra small (0.75rem)
- text-sm → Small (0.875rem)
- text-base → Base (기본) (1rem)
- text-lg → Large (1.125rem)
- text-xl → Extra large (1.25rem)
- text-2xl → 2 times extra large (1.5rem)
- text-3xl → 3 times extra large (1.875rem)
- text-4xl → 4 times extra large (2.25rem)
- text-5xl → 5 times extra large (3rem)
- text-6xl → 6 times extra large (3.75rem)
- text-7xl → 7 times extra large (4.5rem)
폰트 굵기 (Font Weight)
- font-thin → 100 (매우 얇음)
- font-extralight → 200
- font-light → 300
- font-normal → 400 (기본)
- font-medium → 500
- font-semibold → 600
- font-bold → 700 (굵음)
- font-extrabold → 800
- font-black → 900 (매우 굵음)
6. 테두리 (Borders)
- border → 기본 테두리 (1px solid)
- border-2 → 2px 테두리
- border-4 → 4px 테두리
- border-black → 검정색 테두리
- rounded- → 기본 둥근 모서리
- rounded-full → 완전한 원형 모서리
- border-t → 상단 테두리
- border-b → 하단 테두리
7. 기타
- shadow → 기본 그림자
- shadow-lg → 큰 그림자
- opacity-50 → 50% 불투명도
- cursor-pointer → 포인터 커서
- transition → 트랜지션 효과
- duration-300 → 300ms 트랜지션 시간