Tailwind CSS能否组合选择器？子元素如何响应peer选中状态

你的问题核心是：peer-checked默认只能作用于与peer（复选框）同级的元素，无法直接跨层级控制子元素。下面是具体的解决方法：

正确实现方式 #

直接在与peer同级的父div上，使用Tailwind的自定义选择器来指定子元素的样式：

<label>
    <input type="checkbox" className='hidden peer' />
    <div className='bg-blue-main rounded-full w-[3.125rem] h-[1.125rem] p-[1px] relative peer-checked:bg-black peer-checked:[&>div]:bg-red-500 peer-checked:[&>div]:translate-x-full'>
        <div className='bg-white h-full aspect-square rounded-full shadow-md absolute top-0 left-0 transition-all duration-300'></div>
    </div>
</label>

关键说明 #

• peer-checked:[&>div]:bg-red-500：当复选框（peer）被选中时，当前父div的直接子div会应用红色背景样式。&代表当前元素（父div），>div选择直接子元素。
• 额外添加了translate-x-full和transition-all duration-300，让滑块有平滑的移动动画，更符合开关组件的交互体验。
• 你之前写的peer-checked:first:bg-red-500是错误的：first伪类在这里不适用，且peer-checked无法直接作用于非同级的子元素。

内容的提问来源于stack exchange，提问作者JJAHMEDAMER