Tailwind - Tyography 스타일링

 

Tailwind - Tyography 스타일링

#Web/CSS

폰트 크기, 폰트 두께, 텍스트 정렬, 라인 높이 등의 스타일 속성을 Tailwind의 유틸리티 클래스로 적용하는 방법에 대해 살펴보자.

폰트 크기 조절(font-size)

<p class="text-sm">이 문장은 작은 크기입니다.</p>
<p class="text-lg">이 문장은 큰 크기입니다.</p>
<p class="text-2xl">이 문장은 더 큰 크기입니다.</p>

폰트 두께 설정(font-weight)

<p class="font-light">이 문장은 얇은 폰트입니다.</p>
<p class="font-normal">이 문장은 일반 두께입니다.</p>
<p class="font-bold">이 문장은 굵은 폰트입니다.</p>

텍스트 정렬(text-align)

<p class="text-left">이 문장은 왼쪽 정렬되었습니다.</p>
<p class="text-center">이 문장은 중앙 정렬되었습니다.</p>
<p class="text-right">이 문장은 오른쪽 정렬되었습니다.</p>

라인 높이 조절(line-height)

<p class="leading-none">이 문장은 라인 간격이 매우 좁습니다.</p>
<p class="leading-loose">이 문장은 라인 간격이 넓습니다.</p>

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복