[Tailwind CSS] group(그룹) 수정자: 부모 상태에 따라 자식 요소 스타일하기

group-{modifier:class}

: 부모 요소의 상태(state)에 따라 자식 요소의 스타일을 동적으로 변경한다.

• 부모 요소가 hover, focus와 같은 상태일 때, 그 상태를 기반으로 자식 요소의 스타일을 변경한다.
• 사용: 인터랙티브 UI(버튼, 카드, 메뉴) 등에서 자식 요소에 동적 스타일링이 필요할 때 사용

group-hover	부모 요소에 마우스를 올릴 때 적용	group-hover:bg-blue-500
group-focus	부모 요소가 포커스될 때 적용	group-focus:text-green-500
group-active	부모 요소가 활성화(클릭 등)될 때 적용	group-active:scale-105
group-disabled	부모 요소가 비활성화될 때 적용	group-disabled:opacity-50

 

 

 

사용법

1. 부모 요소에 group 클래스 추가
   • 부모 요소에 group 클래스를 추가하여 상태 전달의 기준이 되는 그룹을 만든다.
2. 자식 요소에 group-{modifier} 추가
   • 하위 요소에 group-hover, group-focus와 같은 클래스(modifier)를 추가한다.

 

 

예제

(1) 버튼에 마우스를 올렸을 때(hover) 아이콘의 색상이 변하는 예시

• 버튼의 부모 요소에 마우스를 올리면(hover 상태) 부모(group)의 상태가 변경된다.
• 자식 요소인 span의 클래스에서 group-hover:text-red-500이 적용되어 텍스트 색상이 빨간색으로 변경된다.

<div class="group">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">
    Hover Me
  </button>
  <span class="text-gray-500 group-hover:text-red-500">
    ← 아이콘
  </span>
</div>

 

 

(2) 카드 전체에 마우스를 올리면 제목의 색상이 변하는 예시

• 카드에 마우스를 올리면 부모 요소(group)의 상태가 hover로 변경된다.
• 제목(h3)에 설정된 group-hover:text-blue-500이 적용되어 텍스트 색상이 파란색으로 변한다.

<div class="group p-4 border rounded-md hover:shadow-lg">
  <h3 class="text-lg font-bold group-hover:text-blue-500">
    카드 제목
  </h3>
  <p class="text-gray-700">
    카드 내용
  </p>
</div>

 

---

 

 

Handling Hover, Focus, and Other States - Tailwind CSS