Tailwind CSS group 활용으로 개별 아이템 Hover 스타일 변경하기

🛑 상위 컴포넌트에 마우스를 올렸을 때 하위 요소에 css 적용은?

큰 div(리스트 아이템 전체)에 마우스를 올리면, 그 내부에 있는 특정 텍스트(span)의 색상을 변경하고 싶었습니다. 처음에는 단순히 hover:text-deep-mint를 적용했지만, 마우스를 div에 올렸을 때만 텍스트 색상이 바뀌도록 만들기 어려웠습니다.

<div className="py-5 px-9 cursor-pointer border-b border-light-gray hover:text-deep-mint">
  <span className="font-bold text-title-sm">{product.name}</span>
</div>

위 코드에서는 마우스를 텍스트(span) 위에 직접 올려야 색상이 변경되었고, div 전체에 hover해도 적용되지 않았습니다.

✅ group을 활용하여 부모 요소의 hover 상태에 따라 자식 스타일 변경하기

Tailwind의 group 클래스를 사용하여, 부모(div)에 마우스를 올렸을 때 자식 요소(span)의 색상을 변경할 수 있습니다.

<div className="group py-5 px-9 cursor-pointer border-b border-light-gray">
  <span className="font-bold text-title-sm group-hover:text-deep-mint">
    {product.name}
  </span>
</div>

Tailwind 공식 문서 참고

Tailwind의 group은 부모 요소의 상태에 따라 자식 요소의 스타일을 변경할 때 유용합니다. 공식 문서에서도 group-hover를 활용하여 특정 요소에 마우스를 올릴 때 자식 요소의 스타일을 변경하는 예시가 제공되어 있습니다.

📌 Tailwind 공식 문서: group-hover

"To style a child element when a parent is hovered, use group on the parent and group-hover on the child."

이러한 원리를 활용하면, 부모 요소의 hover 상태를 기준으로 특정 자식 요소의 스타일을 변경할 수 있습니다.

처음에는 hover:text-deep-mint를 span에 적용했지만, 마우스를 div 전체에 올렸을 때 색상이 변하지 않는 문제가 발생했습니다. 이를 해결하기 위해 div에 group을 적용하고, span에 group-hover를 추가하여 원하는 동작을 구현했습니다.

이처럼 Tailwind의 group을 활용하면 불필요한 이벤트 핸들러 없이도 스타일을 쉽게 제어할 수 있습니다! 🎨

FrontEnd-Dev