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>