<aside>
💡 ~ 형제 셀렉터는 인접한(같은 레벨) 형제 엘리먼트를 모두 선택한다
ex) section ~ p { } → section 요소 뒤에 인접한 형제 엘리먼트 p 모두 선택
</aside>
Tailwind CSS 2.2 버전부터 peer-* variants로 형제 요소를 선택할 수 있다. input 요소에 peer 클래스를 정의해두면, 형제 요소에서 peer 클래스를 이용해 input 요소를 선택할 수 있다. 주로 peer-checked 처럼 요소의 특정 상태를 선택할 때 사용한다. peer-checked는 (체크박스 등)요소가 체크된 상태일 때 적용된다. 이외에도 다양한 가상 클래스 셀렉터를 사용할 수 있다. ex) peer-hover peer-focus peer-disabled
<label>
<input type="checkbox" class="peer sr-only" />
<!-- input 요소(peer)가 체크된 상태면 span 요소의 배경색을 blue-500으로 변경 -->
<span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500" />
<!-- ... -->
</label>
참고로 위 peer-checked 클래스는 ~ 형제 셀렉터를 사용한 CSS 코드로 변환된다.
.peer:checked ~ .peer-checked\\:bg-blue-500 {
background-color: #3b82f6;
}