[TailwindCSS] Pseudo classes - 부모 요소 상태에 따른 스타일링 group

Tailwind CSS를 사용하면 부모 요소의 상태에 따라 자식 요소를 스타일링할 수 있다. 이를 위해 부모 요소에 group 클래스를 추가하고, 자식 요소에 group-* 수정자를 사용하면 된다. 아래는 다양한 예시를 통해 이를 설명한다.

1. 기본 사용법

부모 요소에 group 클래스를 추가하고, 자식 요소에 group-hover와 같은 수정자를 사용한다.

예시:

<a href="#" class="group block p-6 bg-white hover:bg-sky-500">
  <h3 class="text-slate-900 group-hover:text-white">New project</h3>
  <p class="text-slate-500 group-hover:text-white">Create a new project.</p>
</a>

위 예시에서는 링크 요소에 마우스를 올리면 텍스트 색상이 변경된다.

2. 중첩된 그룹

중첩된 그룹을 다룰 때, 특정 부모 그룹의 상태에 따라 자식 요소를 스타일링하려면 부모 그룹에 고유한 이름을 부여한다. 이를 통해 중첩된 그룹 간의 혼동을 피할 수 있다.

예시:

<ul>
  <li class="group/item hover:bg-slate-100 p-4">
    <div>
      <a href="#" class="text-slate-700 group-hover/item:text-blue-500">Leslie Abbott</a>
      <p class="text-slate-500 group-hover/item:text-blue-500">Co-Founder / CEO</p>
    </div>
    <a href="tel:1234567890" class="group/edit invisible group-hover/item:visible">
      <span class="group-hover/edit:text-gray-700">Call</span>
      <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500">
        <!-- ... -->
      </svg>
    </a>
  </li>
  <li class="group/item hover:bg-slate-100 p-4">
    <div>
      <a href="#" class="text-slate-700 group-hover/item:text-blue-500">Hector Adams</a>
      <p class="text-slate-500 group-hover/item:text-blue-500">VP, Marketing</p>
    </div>
    <a href="tel:1234567890" class="group/edit invisible group-hover/item:visible">
      <span class="group-hover/edit:text-gray-700">Call</span>
      <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500">
        <!-- ... -->
      </svg>
    </a>
  </li>
</ul>

위 예시에서는 group/item과 group/edit 클래스를 사용하여 중첩된 그룹을 다루고, 각각의 그룹 상태에 따라 자식 요소를 스타일링한다. group-hover/item는 group/item의 상태에 반응하고, group-hover/edit는 group/edit의 상태에 반응한다.

3. 임의의 그룹

임의의 group-* 수정자를 생성하여 독특한 스타일을 적용할 수 있다.

예시:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

또한, & 문자를 사용하여 그룹이 최종 선택자에서 어디에 위치할지 지정할 수 있다.

예시:

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

위 예시에서는 :nth-of-type(3) 조건에 따라 그룹 상태를 지정하여 스타일을 적용한다.

이와 같은 방법을 통해 Tailwind CSS를 사용하여 부모 요소의 상태에 따라 자식 요소를 손쉽게 스타일링할 수 있다.