Tailwind CSS를 사용하여 라디오 버튼의 선택된 상태에 대한 응답으로 상위 div의 스타일 변경

Question

여러 열과 행당 라디오 버튼이 있는 테이블이 있습니다. 특정 버튼을 선택하면 전체 행의 배경색을 변경해야 합니다. 이것이 달성될 수 있습니까?

<tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50">
<input type="radio" name="user" id="{{ user.id }}">
<label for="{{ user.id }}">{{ user.email }}</label>
<div>{{ 사용자 이름 }}</div>
</tr>

Tailwind에서는 'peer' 클래스를 사용하여 인접한 블록의 스타일을 지정할 수 있습니다. 하지만 상위 블록의 스타일을 지정해야 합니다(을 선택하면 상위 블록의 배경색이 변경되어야 합니다).

Answer 1

가상 클래스를 사용할 수 있지만:has() 브라우저에서는 지원이 제한됩니다(예: Mozilla에서는 지원되지 않음). 이 선택기에 대한 브라우저 지원을 확인할 수 있습니다.

으아악 으아악