tab-size

tab-size 유틸리티는 탭 문자(tab)가 차지할 크기(너비)를 조절해 줘요. 코드 블록처럼 탭이 들어가는 내용을 보여줄 때 유용하답니다.

출처: 문서

본문

기본 예시 (Basic example)

tab-<number> 형태의 유틸리티(예: tab-2, tab-8)를 사용하면 탭 문자의 크기를 조절할 수 있어요:

<pre class="tab-2 ...">
function indent() {
  return 'tabbed'
}
</pre>

<pre class="tab-8 ...">
function indent() {
  return 'tabbed'
}
</pre>

커스텀 값 사용하기 (Using a custom value)

tab-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 탭 크기를 설정할 수 있어요:

<pre class="tab-[12px] ...">
  <!-- ... -->
</pre>

CSS 변수의 경우 tab-(<custom-property>) 문법을 사용할 수도 있어요:

<pre class="tab-(--my-tab-size) ...">
  <!-- ... -->
</pre>

이것은 tab-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.

반응형 디자인 (Responsive design)

tab-size 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<pre class="tab-4 md:tab-8 ...">
  <!-- ... -->
</pre>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.