Space Between

​Basic usage

​자식 요소 사이에 수평 간격 추가하기

space-x-* 유틸리티를 사용해 요소들 사이의 수평 간격을 조절할 수 있습니다.

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​자식 요소 사이에 수직 간격 추가하기

space-y-* 유틸리티를 사용해 요소들 사이의 수직 간격을 조절할 수 있습니다.

<div class="flex flex-col space-y-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​자식 요소 순서 뒤집기

요소들이 반대 순서로 배치되어 있다면(예: flex-row-reverse 또는 flex-col-reverse 사용), space-x-reverse 또는 space-y-reverse 유틸리티를 사용하여 각 요소의 올바른 쪽에 공간이 추가되도록 할 수 있습니다.

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​음수 값 사용하기

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

<div class="flex -space-x-4 ...">
  <!-- ... -->
</div>

​제한 사항

이 유틸리티들은 그룹 내 첫 번째 항목을 제외한 모든 항목에 마진을 추가하는 간단한 방법일 뿐입니다. 그리드, 줄바꿈이 있는 레이아웃, 또는 자식 요소들이 DOM 순서가 아닌 복잡한 커스텀 순서로 렌더링되는 경우와 같은 복잡한 상황을 처리하도록 설계되지 않았습니다.

이러한 상황에서는 가능한 경우 간격 유틸리티를 사용하거나, 부모 요소에 음수 마진을 적용하여 모든 요소에 마진을 추가하는 것이 더 좋습니다:

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

​divide 유틸리티와 함께 사용할 수 없음

space-* 유틸리티는 divide 유틸리티와 함께 사용하도록 설계되지 않았습니다. 이런 경우에는 자식 요소에 마진이나 패딩 유틸리티를 추가하는 것을 고려해 보세요.

​Applying conditionally

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

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

<div class="flex space-x-2 hover:space-x-8">
  <!-- ... -->
</div>

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

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

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

<div class="flex space-x-2 md:space-x-8">
  <!-- ... -->
</div>

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

​Using custom values

​테마 커스터마이징

기본적으로 Tailwind의 간격 스케일은 기본 간격 스케일을 사용합니다. tailwind.config.js 파일에서 theme.spacing 또는 theme.extend.spacing을 수정하여 간격 스케일을 커스터마이징할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

또는 tailwind.config.js 파일에서 theme.space 또는 theme.extend.space를 수정하여 간격 스케일만 커스터마이징할 수도 있습니다.

module.exports = {
  theme: {
    extend: {
      space: {
        '5px': '5px',
      }
    }
  }
}

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

​임의 값

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

<div class="space-y-[5px]">
  <!-- ... -->
</div>

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