Tailwind - Tyography 스타일링

2025. 2. 13. 00:01·FE/CSS

 

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 완전 정복

'FE > CSS' 카테고리의 다른 글

Tailwind - Layout(Container, Flexbox, Grid, Position)  (0) 2025.02.13
Tailwind - Core(Utility-First CSS, State)  (0) 2025.02.13
Tailwind - 간격 조절, Sizing  (0) 2025.02.13
Tailwind - 컬러 및 배경, 보더 처리  (0) 2025.02.13
TailwindCSS 설치 정리(V3.4.17 기준)  (0) 2025.02.13
'FE/CSS' 카테고리의 다른 글
  • Tailwind - Core(Utility-First CSS, State)
  • Tailwind - 간격 조절, Sizing
  • Tailwind - 컬러 및 배경, 보더 처리
  • TailwindCSS 설치 정리(V3.4.17 기준)
lumana
lumana
배움을 나누는 공간 https://github.com/bebeis
  • lumana
    Brute force Study
    lumana
  • 전체
    오늘
    어제
    • 분류 전체보기 (452)
      • Software Development (27)
        • Performance (0)
        • TroubleShooting (1)
        • Refactoring (0)
        • Test (8)
        • Code Style, Convetion (0)
        • DDD (0)
        • Software Engineering (18)
      • Java (71)
        • Basic (5)
        • Core (21)
        • Collection (7)
        • 멀티스레드&동시성 (13)
        • IO, Network (8)
        • Reflection, Annotation (3)
        • Modern Java(8~) (12)
        • JVM (2)
      • Spring (53)
        • Framework (12)
        • MVC (23)
        • Transaction (3)
        • AOP (11)
        • Boot (0)
        • AI (0)
      • DB Access (1)
        • Jdbc (1)
        • JdbcTemplate (0)
        • JPA (14)
        • Spring Data JPA (0)
        • QueryDSL (0)
      • Computer Science (125)
        • Data Structure (27)
        • OS (14)
        • Database (10)
        • Network (21)
        • 컴퓨터구조 (1)
        • 시스템 프로그래밍 (23)
        • Algorithm (29)
      • HTTP (8)
      • Infra (1)
        • Docker (1)
      • 프로그래밍언어론 (15)
      • Programming Language(Sub) (77)
        • Kotlin (1)
        • Python (25)
        • C++ (51)
        • JavaScript (0)
      • FE (11)
        • HTML (1)
        • CSS (9)
        • React (0)
        • Application (1)
      • Unix_Linux (0)
        • Common (0)
      • PS (13)
        • BOJ (7)
        • Tip (3)
        • 프로그래머스 (0)
        • CodeForce (0)
      • Book Review (4)
        • Clean Code (4)
      • Math (3)
        • Linear Algebra (3)
      • AI (7)
        • DL (0)
        • ML (0)
        • DA (0)
        • Concepts (7)
      • 프리코스 (4)
      • Project Review (6)
      • LegacyPosts (11)
      • 모니터 (0)
      • Diary (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
lumana
Tailwind - Tyography 스타일링
상단으로

티스토리툴바