FE/CSS
Tailwind - Tyography 스타일링
lumana
2025. 2. 13. 00:01
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>