How to select sibling child in tailwindcss using react

Issue

I'm new to tailwindcss and I'm trying to select a child of the direct sibling of an element.

I'm trying to duplicate this toggle button when the checkbox is checked it toggles its state, the example I'm cloning is here:

https://codepen.io/bheberer/pen/BaNZKmq?editors=1100

and this is my attempt so far re-creating the CSS by using tailwindcss

<label className='cursor-pointer'>
  <input
    className='toggle-checkbox absolute h-0 w-0 opacity-0 peer'
    type='checkbox'
  />
  <div className='toggle-slot relative h-[calc(var(--drkModeToggleSize)/2.77)] w-[var(--drkModeToggleSize)] border-2 border-solid border-gray-200 rounded-full shadow-lg transition-colors peer-checked:bg-gray-700'>
    <div className='sun-icon-wrapper absolute opacity-100 translate-x-4 translate-y-1 rotate-12 origin-[50%_50%] transition-all'>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        xmlnsXlink='http://www.w3.org/1999/xlink'
        aria-hidden='true'
        focusable='false'
        preserveAspectRatio='xMidYMid meet'
        viewBox='0 0 24 24'
        className='absolute h-10 w-10 text-orange-300'
        data-icon='feather-sun'
        data-inline='false'
      >
        <g
          fill='none'
          stroke='currentColor'
          strokeWidth='2'
          strokeLinecap='round'
          strokeLinejoin='round'
        >
          <circle cx='12' cy='12' r='5'></circle>
          <path d='M12 1v2'></path>
          <path d='M12 21v2'></path>
          <path d='M4.22 4.22l1.42 1.42'></path>
          <path d='M18.36 18.36l1.42 1.42'></path>
          <path d='M1 12h2'></path>
          <path d='M21 12h2'></path>
          <path d='M4.22 19.78l1.42-1.42'></path>
          <path d='M18.36 5.64l1.42-1.42'></path>
        </g>
      </svg>
    </div>
    
    <div className='toggle-button absolute h-10 w-10 rounded-full bg-yellow-100 translate-x-[calc(var(--drkModeToggleSize)/1.5)] translate-y-[calc(var(--drkModeToggleSize)/20)] shadow-[inset_0_0_0_0.35em] shadow-orange-300 transition-all'></div>
    
    <div className='moon-icon-wrapper absolute opacity-0 translate-x-24 translate-y-2 rotate-0 origin-[50%_50%] transition-all'>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        xmlnsXlink='http://www.w3.org/1999/xlink'
        aria-hidden='true'
        focusable='false'
        preserveAspectRatio='xMidYMid meet'
        viewBox='0 0 24 24'
        className='absolute h-10 w-10 text-orange-300'
        data-icon='feather-moon'
        data-inline='false'
      >
        <g
          fill='none'
          stroke='currentColor'
          strokeWidth='2'
          strokeLinecap='round'
          strokeLinejoin='round'
        >
          <path d='M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79z'></path>
        </g>
      </svg>
    </div>
  </div>
</label>

And here's is the rest of the CSS that I couldn't implement using tailwindcss.

:root {
  --drkModeToggleSize: 10em;
}

.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.35em white;
  transform: translate(0.5em, 0.5em);
}

.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(3em, 2em) rotate(0deg);
}

.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(6.5em, 1em) rotate(-15deg);
}

So my question is: how to implement the rest of the CSS code using only tailwind classes.

Thanks a lot.

Solution

One solution would be to make all of your elements peers of the checkbox, so that you can use the peer-checked pseudo-element for the classes needed to display the checked/unchecked state. For example:

<label class='cursor-pointer relative'>
  <input
    class='absolute h-0 w-0 opacity-0 peer'
    type='checkbox'
  />
  <div class='peer-checked:bg-gray-700 absolute h-[calc(var(--drkModeToggleSize)/2.77)] w-[var(--drkModeToggleSize)] border-2 border-solid border-gray-200 rounded-full shadow-lg transition-colors'></div>
  <div class='peer-checked:opacity-0 peer-checked:translate-x-12 peer-checked:translate-y-8 peer-checked:-rotate-0 absolute opacity-100 translate-x-4 translate-y-1 rotate-12 origin-[50%_50%] transition-all'>
    <svg />
  </div>
  
  <div class='peer-checked:bg-[#485367] peer-checked:shadow-white peer-checked:translate-x-2 peer-checked:translate-y-2 absolute h-10 w-10 rounded-full bg-yellow-100 translate-x-[calc(var(--drkModeToggleSize)/1.5)] translate-y-[calc(var(--drkModeToggleSize)/20)] shadow-[inset_0_0_0_0.35em] shadow-orange-300 transition-all'></div>
  
  <div class='peer-checked:opacity-100 peer-checked:translate-x-24 peer-checked:translate-y-3 peer-checked:-rotate-[15deg] absolute opacity-0 translate-x-24 translate-y-2 rotate-0 origin-[50%_50%] transition-all'>
    <svg />
  </div>
</label>

Working sandbox here: https://play.tailwindcss.com/1txGk5CACQ

Note: you may need to tweak the translate- values to get the transforms to work perfectly.

Answered By - Ed Lucas