letter-spacing

예제

기본 예제

tracking-tight와 tracking-wide 같은 유틸리티를 사용해 엘리먼트의 글자 간격을 설정할 수 있습니다.

<p class="tracking-tight ...">The quick brown fox ...</p><p class="tracking-normal ...">The quick brown fox ...</p><p class="tracking-wide ...">The quick brown fox ...</p>

음수 값 사용하기

Tailwind에서 기본 제공하는 글자 간격 스케일에는 음수 값을 사용하는 것이 크게 의미가 없지만, 여러분이 스케일을 숫자로 커스터마이징했다면 유용할 수 있습니다:

@theme {  --tracking-1: 0em;  --tracking-2: 0.025em;  --tracking-3: 0.05em;  --tracking-4: 0.1em;}

음수 글자 간격 값을 사용하려면 클래스 이름 앞에 대시를 붙여 음수 값으로 변환합니다:

<p class="-tracking-2">The quick brown fox ...</p>

커스텀 값 사용하기

tracking-[<value>] 구문을 사용하세요 letter spacing를 완전히 커스텀한 값으로 설정하려면:

<p class="tracking-[.25em] ...">  <!-- ... --></p>

CSS 변수를 사용하려면 tracking-(<custom-property>) 구문을 사용할 수도 있습니다:

<p class="tracking-(--my-tracking) ...">  <!-- ... --></p>

이는 tracking-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a letter-spacing 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<p class="tracking-tight md:tracking-wide ...">  <!-- ... --></p>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스텀하기

--tracking-* 테마 변수를 사용해 프로젝트에서 letter spacing 유틸리티를 커스터마이징할 수 있습니다:

@theme {  --tracking-tightest: -0.075em; }

이제 tracking-tightest 유틸리티를 마크업에서 사용할 수 있습니다:

<p class="tracking-tightest">  <!-- ... --></p>

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