Is there a way I can use the TailwindCSS peer marker for elements in different divs?

Question

I have a form page where users get a form when they check the box for an apartment type and get a different one when they pick another.

<form class="" action="{% url 'requestservice:req_service' %}" method="POST">

                <input type="radio" id="single" value="SINGLE" class="peer/single"  name="property_type" checked />
                <label for="single" class="peer-checked/single:text-sky-500">Single Unit</label>
                        
                <input type="radio" id="multiple" value="MULTIPLE" class="peer/multiple"  name="property_type" />
                <label for="draft" class="peer-checked/multiple:text-sky-500">Multiple D. Unit</label>
            
                        
                <div class="hidden peer-checked/multiple:block  bg-white px-2 py-2 w-full space-y-2 md:space-y-3 rounded-xl">
                    <!--
                        <h3> M.D.U Unit Form </h3>
                    -->            
                    <div class="block">
                        <p class="font-medium text-gray-950 text-sm"> Name of property: </p>
                        <input type='text'  name="multiple_property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
                    </div>
            
                    <div class="font-medium flex space-x-5">
                        <p class="font-medium text-sm"> Central Server Room Avaliable: </p>
                        <input type="radio" name="central_server_room">
                    </div>
                    
                    <div class="block ">
                        <p class="font-medium text-sm"> Number of houses in MDU </p>
                        <input name="number_of_houses" placeholder="Number of houses" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg" type="number">
                    </div>
                </div>
                
                    
                <div class="hidden peer-checked/single:block bg-white px-2 py-2 space-y-2 w-full rounded-xl">
                    <!--
                        <h3> Single Unit Form </h3>
                    -->
                    <div class="block space-y-1">
                        <p class="font-medium"> Name of property: </p>
                        <input type='text' name="single_property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
                    </div> 
                </div>
            
                <div class="bg-inherit w-full h-3">

                </div>
                
                <div class="flex justify-center">
                    <input type="submit" class="bg-red-500  font-medium p-1 text-white text-center rounded-lg" value="Request Service">
                </div>

            
</form>

I implemented this using the peer markers in TailwindCSS and technically, it works.

The problem is I need to put the radio buttons and their labels in seperate divs then put the two divs in a another div so I can style the form the way I want but if I put these radio buttons (which are carrying the markers) or the sibling elements (the form divs I want to make visible or hidden based on their sibling's state), the peer marker no longer works and the form div just remain hidden.

Again, the form works but this issue is hindering me from styling the form the way I want.

How do i fix this using JUST TailwindCSS?

Answer 1

For a strictly Tailwind-only solution, you could consider using the :has() pseudo class though please be aware that there is no general support in Firefox at this time of writing.

<script src="https://cdn.tailwindcss.com"></script>

<form class="" action="{% url 'requestservice:req_service' %}" method="POST">

  <div class="peer">
    <div>
      <input type="radio" id="single" value="SINGLE" class="peer/single" name="property_type" checked />
      <label for="single" class="peer-checked/single:text-sky-500">Single Unit</label>
    </div>

    <div>
      <input type="radio" id="multiple" value="MULTIPLE" class="peer/multiple" name="property_type" />
      <label for="draft" class="peer-checked/multiple:text-sky-500">Multiple D. Unit</label>
    </div>
  </div>

  <div class="hidden peer-[:has(#multiple:checked)]:block  bg-white px-2 py-2 w-full space-y-2 md:space-y-3 rounded-xl">
    <div class="block">
      <p class="font-medium text-gray-950 text-sm"> Name of property: </p>
      <input type='text' name="multiple_property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
    </div>

    <div class="font-medium flex space-x-5">
      <p class="font-medium text-sm"> Central Server Room Avaliable: </p>
      <input type="radio" name="central_server_room">
    </div>

    <div class="block ">
      <p class="font-medium text-sm"> Number of houses in MDU </p>
      <input name="number_of_houses" placeholder="Number of houses" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg" type="number">
    </div>
  </div>


  <div class="hidden peer-[:has(#single:checked)]:block bg-white px-2 py-2 space-y-2 w-full rounded-xl">
    <div class="block space-y-1">
      <p class="font-medium"> Name of property: </p>
      <input type='text' name="single_property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
    </div>
  </div>

  <div class="bg-inherit w-full h-3">

  </div>

  <div class="flex justify-center">
    <input type="submit" class="bg-red-500  font-medium p-1 text-white text-center rounded-lg" value="Request Service">
  </div>


</form>

Alternatively, with a slightly more bending of your stipulations, you could consider having the <input> radios hidden and outside the <div>s, so that peer can still work. Instead, have custom radio buttons for appearances:

<script src="https://cdn.tailwindcss.com"></script>

<form class="" action="{% url 'requestservice:req_service' %}" method="POST">

  <input type="radio" id="single" value="SINGLE" class="peer/single sr-only" name="property_type" checked />
  <input type="radio" id="multiple" value="MULTIPLE" class="peer/multiple sr-only" name="property_type" />

  <div class="group">
    <div>
      <label for="single" class="group-[#single:checked~&]:text-sky-500">
        <div class="w-[1em] h-[1em] border border-slate-800 rounded-full inline-block p-0.5 bg-clip-content group-[#single:checked~&]:bg-sky-500"></div>
        Single Unit
      </label>
    </div>

    <div>
      <label for="multiple" class="group-[#multiple:checked~&]:text-sky-500">
        <div class="w-[1em] h-[1em] border border-slate-800 rounded-full inline-block p-0.5 bg-clip-content group-[#multiple:checked~&]:bg-sky-500"></div>
        Multiple D. Unit
      </label>
    </div>
  </div>

  <div class="hidden peer-checked/multiple:block  bg-white px-2 py-2 w-full space-y-2 md:space-y-3 rounded-xl">
    <div class="block">
      <p class="font-medium text-gray-950 text-sm"> Name of property: </p>
      <input type='text' name="multiple_property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
    </div>

    <div class="font-medium flex space-x-5">
      <p class="font-medium text-sm"> Central Server Room Avaliable: </p>
      <input type="radio" name="central_server_room">
    </div>

    <div class="block ">
      <p class="font-medium text-sm"> Number of houses in MDU </p>
      <input name="number_of_houses" placeholder="Number of houses" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg" type="number">
    </div>
  </div>


  <div class="hidden peer-checked/single:block bg-white px-2 py-2 space-y-2 w-full rounded-xl">
    <div class="block space-y-1">
      <p class="font-medium"> Name of property: </p>
      <input type='text' name="single_property_name" class="w-full p-1 focus:border-1 focus:outline-yellow-300 border border-red-100 shadow-md shadow-red-100 rounded-lg " placeholder="Property name">
    </div>
  </div>

  <div class="bg-inherit w-full h-3">

  </div>

  <div class="flex justify-center">
    <input type="submit" class="bg-red-500  font-medium p-1 text-white text-center rounded-lg" value="Request Service">
  </div>


</form>