border-spacing

border-spacing (테두리 간격)

테이블 셀의 테두리 사이의 간격을 제어하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

Examples

Basic example

border-spacing-2 이나 border-spacing-x-3 같은 border-spacing-<number> 유틸리티를 사용해서 테두리가 분리된(border-separated) 테이블 셀의 테두리 사이 간격을 제어할 수 있어요.

<table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500">
  <thead>
    <tr>
      <th class="border border-gray-300 dark:border-gray-600">State</th>
      <th class="border border-gray-300 dark:border-gray-600">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Indiana</td>
      <td class="border border-gray-300 dark:border-gray-700">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Ohio</td>
      <td class="border border-gray-300 dark:border-gray-700">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Michigan</td>
      <td class="border border-gray-300 dark:border-gray-700">Detroit</td>
    </tr>
  </tbody>
</table>

Using a custom value

border-spacing-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 테두리 간격을 설정할 수 있어요.

<table class="border-spacing-[7px] ...">
  <!-- ... -->
</table>

CSS 변수라면 border-spacing-(<custom-property>) 문법을 사용할 수도 있어요.

<table class="border-spacing-(--my-border-spacing) ...">
  <!-- ... -->
</table>

이는 border-spacing-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Responsive design

border-spacing 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<table class="border-spacing-2 md:border-spacing-4 ...">
  <!-- ... -->
</table>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

Customizing your theme

border-spacing-<number> 유틸리티는 --spacing 테마 변수에 의해 구동되는데, 이 변수는 자신의 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일을 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme variable 문서를 참고해 주세요.

더 알아보기 (Learn more)