Tailwind CSS divide-y 속성

 

🔍 divide-y란?

 

divide-y는 부모 요소의 자식들 사이에 세로(위–아래) 구분선을 자동으로 넣는 Tailwind 유틸리티 클래스입니다.

 

✔ 첫 번째 자식 위에는 선이 생기지 않고

✔ 두 번째 자식부터 border-top이 자동으로 추가됩니다.

 

---

 

🧩 기본 사용법

<div class="divide-y divide-gray-300">
  <div>항목 1</div>
  <div>항목 2</div>
  <div>항목 3</div>
</div>

 

➜ 결과

• 각 항목 사이에 얇은 회색 구분선 생성
• 불필요한 border 스타일을 각 자식에 넣을 필요 없음
• 리스트, 메뉴, 프로필 섹션 등에서 자주 사용됨

 

---

 

🎨 구분선 색상 변경

<div class="divide-y divide-slate-200">

Tailwind의 모든 색상 클래스를 사용할 수 있음.

 

---

 

➕ 선 두께 변경

<div class="divide-y divide-gray-300 divide-2">

 

• divide 뒤에 -2, -4, -8 등 두께 설정 가능

 

---

 

➖ 선 스타일 변경 (점선/대시)

<div class="divide-y divide-dashed">

<div class="divide-y divide-dotted">

 

---

 

↔️ 참고: divide-x도 있음

 

자식 요소 사이에 가로 방향(좌–우) 구분선을 넣고 싶다면 divide-x 사용.

<div class="flex divide-x divide-gray-300">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

 

---

 

✨ 정리

클래스의미

divide-y	자식 요소 사이에 세로 방향 구분선
divide-x	자식 요소 사이에 가로 방향 구분선
divide-gray-300 등	구분선 색상
divide-2	구분선 두께
divide-dashed / divide-dotted	구분선 스타일

 

---

 

 

divide-y 공식 문서

border-width - Borders

 

 

 

 

 

divide 색상 / 스타일 관련 문서

border-style - Borders

border-color - Borders

 

 

 

 

관련 개념 정리(전체 divide 계열)

border-width - Borders