我是tailwindcss的新手，我试图选择一个元素的直接兄弟的子元素。
我试图复制这个切换按钮时，复选框被选中它切换其状态，我克隆的例子是在这里：

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

这是我迄今为止尝试使用tailwindcss重新创建CSS的尝试

<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>

字符串
这里是我不能使用tailwindcss实现的CSS的其余部分。

: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);
}

型
所以我的问题是：如何只使用顺风类来实现CSS代码的其余部分。
非常感谢.