부모의 상태에 따라 스타일링을 할 수 있는 Tailwind css의 `group` modifier

부모 요소의 state에 따라 특정 자식 요소의 스타일을 지정해야 하는 경우, 먼저 부모 요소에 `group` 클래스를 작성하고, target 요소에는 `group-hover` 등 `group-*` modifier를 사용해 스타일을 지정할 수 있다. 

 

예를 들어 다음과 같은 책 상세 페이지에서 한 줄 평 영역에 마우스를 hover할 때 편집 버튼이 나타나게 하고 싶다면 다음과 같이 코드를 작성할 수 있다. 

 

 

이 동작을 css에서 직접적으로 구현하려면 다음과 같은 방식으로 할 수 있다. 

 

 

즉, Tailwind CSS의 `group`은 css의 가상 클래스와 자식 선택자를 활용해 부모 요소의 상태에 따라 자식 요소의 스타일을 지정하는 기능을 제공하는 것이다. 

 

실제로 빌드 파일을 살펴보면 다음과 같은 라인을 찾을 수 있다. (next.js 프로젝트의 경우, `npm run build`를 실행 후 .next/static/css/*.css 파일을 보면 된다.) 

 

 

 

📚 참고 자료 

Handling Hover, Focus, and Other States - Tailwind CSS