Tailwind peer class and nested elements

Tailwind peer class and nested elements
typescript
Ethan Jackson

Can't get this to work:

https://play.tailwindcss.com/q2CNd9zkjp

The style for the label element itself applies but for the styled radio button it doesn't. as far as I could troubleshoot it's because the peer class can't be directly applied to nested elements but I believe there must be some workaround.

Thanks in advance.

Answer

The peer class only affects direct sibling elements, not their child elements.

<script src="https://cdn.tailwindcss.com"></script> <fieldset class="space-y-2"> <label class="group block cursor-pointer"> <input type="radio" name="priority" value="Low" class="peer hidden" /> <div class=" flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900 transition-all "> <!-- Outer Radio --> <div class=" w-5 h-5 flex items-center justify-center rounded-full border-2 border-gray-400 group-has-[input:checked]:border-blue-500 transition-colors "> <!-- Inner Dot --> <div class=" w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 group-has-[input:checked]:scale-100 transition-transform "></div> </div> <span class="text-sm group-has-[input:checked]:text-blue-200">Low</span> </div> </label> </fieldset>

Related Articles