Divide Width

​Basic usage

​수평 자식 요소 사이에 테두리 추가하기

divide-x-* 유틸리티를 사용해 수평으로 배치된 요소 사이에 테두리를 추가할 수 있습니다.

<div class="grid grid-cols-3 divide-x">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​스택된 자식 요소 사이에 테두리 추가하기

스택된 요소 사이에 테두리를 추가하려면 divide-y-* 유틸리티를 사용하세요.

<div class="grid grid-cols-1 divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​자식 요소 순서 뒤집기

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

<div class="flex flex-col-reverse divide-y divide-y-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​Applying conditionally

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

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

<div class="divide-y divide-gray-400 hover:divide-y-8">
  <!-- ... -->
</div>

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

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

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

<div class="divide-y divide-gray-400 md:divide-y-8">
  <!-- ... -->
</div>

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

​Using custom values

​테마 커스터마이징

기본적으로 divide 너비 스케일은 borderWidth 스케일의 값을 상속받습니다. 따라서 border 너비와 divide 너비를 함께 커스터마이징하려면 tailwind.config.js 파일의 theme.borderWidth 섹션을 사용하세요.

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

divide 너비 값만 커스터마이징하려면 tailwind.config.js 파일의 theme.divideWidth 섹션을 사용하세요.

module.exports = {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

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

​임의 값

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

<div class="divide-x-[3px]">
  <!-- ... -->
</div>

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