Tailwind CSS `group`

1. Tailwind CSS group

group 클래스는 CSS의 가상 클래스와 자식 선택자를 활용해, 부모 요소의 상태에 따라 자식 요소의 스타일을 지정할 수 있는 기능을 제공합니다.
이 기능은 자식 요소가 직접 상태를 가지지 않아도, 부모 요소의 상태(예: hover, focus, 등)에 따라 스타일링을 유연하게 적용할 수 있도록 돕습니다.

사용 방법

1. 그룹화 요소에 group 클래스 추가
   • 부모 요소에 group 클래스를 추가하여 그룹화합니다.
2. 자식 요소에 상태 기반 스타일 적용
   • 자식 요소에 group-* 접두사(예: group-hover, group-focus)를 사용하여 부모의 상태에 따라 스타일을 설정합니다.

---

2. Tailwind CSS group-hover

group-hover 클래스는 그룹화된 요소가 호버 상태일 때 자식 요소에 스타일을 적용합니다.
이를 통해 부모 요소에 호버 상태가 적용될 때, 해당 그룹 내의 특정 자식 요소에 스타일을 동적으로 추가할 수 있습니다.

예시 코드: 부모 호버 시 자식에 밑줄 추가

<div class="group">
  <p class="text-gray-700 group-hover:underline">
    부모 요소에 마우스를 올리면 밑줄이 나타납니다.
  </p>
</div>

코드 설명

• group 클래스는 부모 요소를 그룹화합니다.
• group-hover:underline 클래스는 부모 요소가 호버 상태일 때 자식 요소에 밑줄 스타일을 추가합니다.

---

3. 추가적인 활용

group-hover 외에도 다양한 상태를 활용하여 스타일을 세밀하게 설정할 수 있습니다:

• group-focus: 부모 요소가 포커스 상태일 때.
• group-active: 부모 요소가 활성화 상태일 때.
• group-disabled: 부모 요소가 비활성화 상태일 때.

응용 예시: 여러 상태를 활용한 스타일링

<div class="group">
  <button class="group-hover:bg-blue-500 group-focus:ring group-active:opacity-50">
    부모 상태에 따라 다양한 스타일 적용
  </button>
</div>

---

4. 사용 시 유의점

• HTML 구조 설계: 그룹화를 명확히 하기 위해 group 클래스의 위치와 계층 구조를 적절히 설계해야 합니다.
• 접두사 충돌 방지: group-* 접두사를 사용하므로 클래스 이름 충돌을 주의해야 합니다.
• Tailwind 플러그인: 특정 상태(예: group-disabled)를 사용하려면 추가 Tailwind 플러그인을 설치해야 할 수도 있습니다.

---

5. 마무리

Tailwind CSS의 group과 group-hover는 부모-자식 관계에 따른 상태 기반 스타일링을 단순하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이를 활용하면 자바스크립트 없이도 다양한 인터랙션 효과를 손쉽게 구현할 수 있습니다.