React + Vite 환경에서 Tailwind CSS 타이포그래피 완벽 정리

현업에서 일하다가 자연스레 CSS Style을 Tailwind 코드를 바로 뽑을 수 있다는 것을 알게됐다.

 

이번에 공부하면서 React + Vite + Tailwind 조합으로 작업하다보니, 자주 쓰게되는 클래스가 혼동되어 정리해본다.

 

다들 제 게시물 옆에 띄워놓고 복붙하면서 자연스럽게 외워보시옵소서😁

 

 

✅ 폰트 사이즈 (Font Size)

Vite 프로젝트에서 텍스트 크기를 조절할 때 사용하는 Tailwind CSS의 기본 text-클래스

클래스	크기	비고
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-[원하는px] 으로 쓰면 됨

 

 

✅ 줄간격 (Line Height / Leading)

가독성을 높이기 위해 필수적인 줄간격(Line Height) 설정 방법

클래스	크기	비고
leading-none	1	줄간격 없음
leading-tight	1.25	좁게
leading-snug	1.375	약간 좁게
leading-normal	1.5	기본
leading-relaxed	1.625	넉넉하게
leading-loose	2	매우 넓게
leading-3	12px	-
leading-4	16px	-
leading-5	20px	-
leading-6	24px	-

 

 

 

✅ Font Weight (글꼴 두께)

클래스	두께
font-light	300
font-normal	400
font-medium	500
font-semibold	600
font-bold	700

 

 

 

✅ 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

 

커스텀은 rounded-[원하는px] 으로 쓰면 됨