如何使用反应在tailwindcss中选择兄弟孩子

Question

我是 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);
}

所以我的问题是：如何仅使用 tailwind 类来实现其余的 CSS 代码。

非常感谢。

Answer 1

一种解决方案是让您的所有元素都与复选框对等，这样您就可以将peer-checked 伪元素用于显示选中/未选中状态所需的类。例如：

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

这里的工作沙盒：https://play.tailwindcss.com/1txGk5CACQ

注意：您可能需要调整 translate- 值以使转换完美运行。