CSS 타이포그래피에서 Tailwind로
font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. 색상은 text-*.
타이포그래피는 대응이 분명합니다. font-size: 1.5rem은 text-2xl, font-weight: 700은 font-bold입니다. 다만 text- 접두사가 크기와 색을 모두 맡으니 긴 클래스는 다시 확인하세요.
크기와 line-height
font-size + line-height는 대개 text-* / leading-*로 맵핑됩니다. 드문 브랜드 leading이면 leading-[…]를 쓰세요.
굵기와 tracking
font-weight 600 → font-semibold. 미세한 음수 letter-spacing은 임의 tracking이 필요한 경우가 많습니다.
램프를 억지로 맞추지 마세요
13px 타이포를 “가장 가까운” 토큰으로 반올림하면 시각 계층이 깨질 수 있습니다.
사용해보기
.example { display: flex; gap: 1rem; padding: 1rem; }신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.