간격 시스템 (Spacing Scale)
기준: 1 = 0.25rem = 4px
- 0 = 0px
- 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px
- 5 = 20px, 6 = 24px, 8 = 32px, 10 = 40px
- 12 = 48px, 16 = 64px, 20 = 80px, 24 = 96px
- 32 = 128px, 40 = 160px, 48 = 192px, 64 = 256px
적용: padding(p-), margin(m-), width(w-), height(h-), top/right/bottom/left, gap 등
폰트 크기 (Font Size)
- text-xs = 12px
- text-sm = 14px
- text-base = 16px (기본값)
- text-lg = 18px
- text-xl = 20px
- text-2xl = 24px
- text-3xl = 30px
- text-4xl = 36px
- text-5xl = 48px
- text-6xl = 60px
- text-7xl = 72px
- text-8xl = 96px
- text-9xl = 128px
라인 높이 (Line Height)
- leading-none = 1
- leading-tight = 1.25
- leading-snug = 1.375
- leading-normal = 1.5 (기본값)
- leading-relaxed = 1.625
- leading-loose = 2
폰트 굵기 (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
테두리 반경 (Border Radius)
- rounded-none = 0px
- rounded-sm = 2px
- rounded = 4px (기본값)
- rounded-md = 6px
- rounded-lg = 8px
- rounded-xl = 12px
- rounded-2xl = 16px
- rounded-3xl = 24px
- rounded-full = 9999px
테두리 두께 (Border Width)
- border-0 = 0px
- border = 1px (기본값)
- border-2 = 2px
- border-4 = 4px
- border-8 = 8px
그림자 (Box Shadow)
- shadow-sm = 작은 그림자
- shadow = 기본 그림자
- shadow-md = 중간 그림자
- shadow-lg = 큰 그림자
- shadow-xl = 매우 큰 그림자
- shadow-2xl = 최대 그림자
투명도 (Opacity)
- opacity-0 = 0% (완전 투명)
- opacity-25 = 25%
- opacity-50 = 50%
- opacity-75 = 75%
- opacity-100 = 100% (완전 불투명, 기본값)
Z-Index
- z-0 = 0
- z-10 = 10
- z-20 = 20
- z-30 = 30
- z-40 = 40
- z-50 = 50
- z-auto = auto