tailwind peer group

Tailwind CSS에서 group과 peer는 주로 dropdown, toggle, modal 등과 같은 상호 작용하는 요소들을 스타일링할 때 사용되는 유용한 기능입니다.

1. Group:

• group 클래스는 하위 요소들을 선택하고 해당 요소들에 특정 스타일을 적용하는 데 사용됩니다.
• 일반적으로 부모 요소에 group 클래스를 추가하고, 자식 요소들은 일반적인 CSS 선택자를 사용하여 그룹과 연결합니다.
• 예를 들어, dropdown을 만들 때, 아래와 같이 사용할 수 있습니다:

<div class="group">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">Dropdown</button>
  <ul class="hidden group-hover:block bg-white text-black">
    <li class="p-2">Item 1</li>
    <li class="p-2">Item 2</li>
    <li class="p-2">Item 3</li>
  </ul>
</div>

2. Peer:

• peer 클래스는 그룹과 함께 사용하여 특정 상황에서 CSS 스타일이 충돌하는 것을 방지합니다.
• peer 클래스는 .group과 함께 동시에 사용됩니다.
• 일반적으로 형제 요소들끼리 서로 영향을 주고받지 않도록 스타일링할 때 사용됩니다.
• 예를 들어, toggle 버튼을 만들 때, 아래와 같이 사용할 수 있습니다:

<div class="group">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">Toggle</button>
  <div class="peer hidden group-hover:block bg-white text-black">
    Content that should be shown/hidden on toggle
  </div>
</div>

위의 코드에서 .group 클래스로 묶인 버튼을 클릭하면 .peer 클래스로 묶인 div 요소가 표시되거나 숨겨집니다.

다양한 상호작용 요소들을 위해 group과 peer를 유연하게 활용하여 스타일링할 수 있습니다. 이렇게 함으로써 HTML 요소 간 충돌 없이 원하는 디자인과 동작을 쉽게 구현할 수 있습니다.