如何让Tailwind的peer类作用于兄弟及嵌套子元素？

问题核心 #

Tailwind的peer-*伪类仅能作用于peer元素的直接兄弟节点，无法穿透嵌套层级。你代码中自定义单选按钮的外层边框和内部圆点，因嵌套在input的兄弟div内部，导致peer-checked样式无法生效。

解决方案1：使用Tailwind任意变体控制嵌套元素 #

通过Tailwind的任意变体，在input的直接兄弟div上定义peer-checked触发的子元素样式，无需修改HTML结构：

<fieldset class="space-y-2">
  <legend class="text-sm text-gray-700 mb-1">Select Priority</legend>

  <label class="group block cursor-pointer">
    <input type="radio" name="priority" value="Low" class="peer hidden" checked />
    
    <div class="flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent
                group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900
                peer-checked:[&>.radio-outer]:border-blue-500
                peer-checked:[&>.radio-inner]:scale-100
                transition-all">

      <!-- Outer Radio -->
      <div class="w-5 h-5 flex items-center justify-center rounded-full border-2
                  border-gray-400 transition-colors radio-outer">
        <!-- Inner Dot -->
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 transition-transform radio-inner"></div>
      </div>

      <span class="text-sm">Low</span>
    </div>
  </label>

  <label class="group block cursor-pointer">
    <input type="radio" name="priority" value="Medium" class="peer hidden" />
    <div class="flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent
                group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900
                peer-checked:[&>.radio-outer]:border-blue-500
                peer-checked:[&>.radio-inner]:scale-100
                transition-all">
      <div class="w-5 h-5 flex items-center justify-center rounded-full border-2
                  border-gray-400 transition-colors radio-outer">
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 transition-transform radio-inner"></div>
      </div>
      <span class="text-sm">Medium</span>
    </div>
  </label>

  <label class="group block cursor-pointer">
    <input type="radio" name="priority" value="High" class="peer hidden" />
    <div class="flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent
                group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900
                peer-checked:[&>.radio-outer]:border-blue-500
                peer-checked:[&>.radio-inner]:scale-100
                transition-all">
      <div class="w-5 h-5 flex items-center justify-center rounded-full border-2
                  border-gray-400 transition-colors radio-outer">
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 transition-transform radio-inner"></div>
      </div>
      <span class="text-sm">High</span>
    </div>
  </label>
</fieldset>

关键改动：

• 给嵌套的外层单选框加radio-outer类，内层圆点加radio-inner类
• 在input的直接兄弟div上添加peer-checked:[&>.radio-outer]:border-blue-500和peer-checked:[&>.radio-inner]:scale-100，通过子选择器触发嵌套元素的样式变化

解决方案2：使用CSS变量传递状态 #

通过CSS变量将input的checked状态传递给嵌套元素，代码更简洁：

<fieldset class="space-y-2">
  <legend class="text-sm text-gray-700 mb-1">Select Priority</legend>

  <label class="group block cursor-pointer">
    <input type="radio" name="priority" value="Low" class="peer hidden" checked />
    
    <div class="flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent
                group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900
                peer-checked:[--checked:1] peer-not-checked:[--checked:0]
                transition-all">

      <!-- Outer Radio -->
      <div class="w-5 h-5 flex items-center justify-center rounded-full border-2
                  border-gray-400 transition-colors
                  [border-color:var(--checked,gray-400)]">
        <!-- Inner Dot -->
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 transition-transform
                    [scale:var(--checked,0)]"></div>
      </div>

      <span class="text-sm">Low</span>
    </div>
  </label>

  <label class="group block cursor-pointer">
    <input type="radio" name="priority" value="Medium" class="peer hidden" />
    <div class="flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent
                group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900
                peer-checked:[--checked:1] peer-not-checked:[--checked:0]
                transition-all">
      <div class="w-5 h-5 flex items-center justify-center rounded-full border-2
                  border-gray-400 transition-colors
                  [border-color:var(--checked,gray-400)]">
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 transition-transform
                    [scale:var(--checked,0)]"></div>
      </div>
      <span class="text-sm">Medium</span>
    </div>
  </label>

  <label class="group block cursor-pointer">
    <input type="radio" name="priority" value="High" class="peer hidden" />
    <div class="flex items-center gap-3 p-3 rounded border border-gray-500 bg-transparent
                group-hover:border-blue-400 peer-checked:border-blue-500 peer-checked:bg-blue-900
                peer-checked:[--checked:1] peer-not-checked:[--checked:0]
                transition-all">
      <div class="w-5 h-5 flex items-center justify-center rounded-full border-2
                  border-gray-400 transition-colors
                  [border-color:var(--checked,gray-400)]">
        <div class="w-2.5 h-2.5 rounded-full bg-blue-500 scale-0 transition-transform
                    [scale:var(--checked,0)]"></div>
      </div>
      <span class="text-sm">High</span>
    </div>
  </label>
</fieldset>

关键改动：

• 在input的直接兄弟div上用peer-checked:[--checked:1] peer-not-checked:[--checked:0]定义CSS变量
• 嵌套元素通过[border-color:var(--checked,gray-400)]和[scale:var(--checked,0)]读取变量值，实现样式切换

方案对比 #

• 任意变体：直观易理解，无需额外配置，适合快速修改现有代码
• CSS变量：代码更简洁，状态可复用，适合需要在多个嵌套元素间传递状态的场景

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