Tailwind peer class and nested elements

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>

Answer

Enjoyed this question?