Font Size

​Basic usage

​글꼴 크기 설정

text-* 유틸리티를 사용해 엘리먼트의 글꼴 크기를 조절할 수 있습니다.

<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>

​줄 간격 설정하기

글꼴 크기를 설정할 때 줄 간격을 함께 설정하려면 글꼴 크기 유틸리티에 줄 간격 수정자를 추가하면 됩니다. 예를 들어, text-xl/8을 사용하면 글꼴 크기를 1.25rem으로, 줄 간격을 2rem으로 설정할 수 있습니다.

<p class="text-base/6 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>
<p class="text-base/7 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>
<p class="text-base/loose ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>

줄 간격 스케일에 정의된 값을 사용하거나, 디자인 토큰에서 벗어나야 할 경우 임의의 값을 사용할 수 있습니다.

<p class="text-sm/[17px] ..."></p>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:text-base 를 사용하면 text-base 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<p class="text-sm hover:text-base">
  <!-- ... -->
</p>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:text-base를 사용하면 중간 화면 크기 이상에서만 text-base 유틸리티를 적용할 수 있습니다.

<p class="text-sm md:text-base">
  <!-- ... -->
</p>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.

​Using custom values

​테마 커스터마이징

tailwind.config.js 파일의 theme.fontSize 섹션을 사용해 여러분만의 커스텀 폰트 크기 유틸리티를 설정할 수 있습니다.

module.exports = {
  theme: {
    fontSize: {
      sm: '0.8rem',
      base: '1rem',
      xl: '1.25rem',
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
      '5xl': '3.052rem',
    }
  }
}

기본 테마를 커스터마이징하는 방법에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.

​기본 줄 간격 제공하기

Tailwind의 기본 테마는 각 font-size 유틸리티에 대해 적절한 기본 line-height를 설정합니다. 커스텀 폰트 크기를 사용할 때 기본 줄 간격을 설정하려면 tailwind.config.js 파일에서 [fontSize, lineHeight] 형태의 튜플을 사용해 각 크기를 정의할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

또한 객체 문법을 사용해 기본 줄 간격을 지정할 수 있습니다. 이 방법을 사용하면 기본 letter-spacing과 font-weight 값도 함께 제공할 수 있습니다. [fontSize, { lineHeight?, letterSpacing?, fontWeight? }] 형태의 튜플을 사용해 설정할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
      '3xl': ['1.875rem', {
        lineHeight: '2.25rem',
        letterSpacing: '-0.02em',
        fontWeight: '700',
      }],
    }
  }
}

​임의 값

테마에 포함시키기 어려운 font-size 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

<p class="text-[14px]">
  <!-- ... -->
</p>

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.