Tailwind peer能否作用于单选按钮所在div外元素？官方无文档说明

核心结论 #

Tailwind的peer属性无法直接作用于非同级的外部元素——它的底层逻辑依赖CSS的兄弟选择器（+/~），只能对peer元素之后的同级兄弟元素生效。

你的代码问题分析 #

你提供的代码里，带peer-checked/cred的new-trade__input-group div，和标记为peer/cred的单选按钮并非同级：单选按钮嵌套在多层div内部，而目标div是外层div的下一个兄弟节点，Tailwind生成的选择器无法跨层级匹配到这个外部元素，所以样式不生效。

解决方案 #

方案1：调整DOM结构（最简单） #

把peer标记的单选按钮移到和目标div同级的位置，让兄弟选择器能正常匹配：

<div>
    <label for="head-company" class="block text-xs font-medium mb-0.5">Payment terms</label>
    <!-- 将单选按钮移至外层，与目标div同级 -->
    <input type="radio" name="option" id="cred" class="peer hidden" checked />
    <input type="radio" name="option" id="2" class="peer/cred hidden" />
    
    <!-- tabs -->
    <div class="grid grid-cols-2 rounded-xl bg-basic-white p-0.5" x-data="app">
        <div>
            <label for="cred" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-turquoise-600 peer-checked:text-basic-white">
                CIA
            </label>
        </div>
        <div>
            <label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked/cred:bg-turquoise-600 peer-checked/cred:text-basic-white">
                Credit terms
            </label>
        </div>
    </div>
</div>
<div class="new-trade__input-group peer-checked/cred:bg-turquoise-600 peer-checked/cred:hidden">
    <div class="input-text-group">
        <label for="head-company" class="input-text-group__label">Credit Terms</label>
        <div class="input-text-group__wrap">
            <input class="max-w-[96px]" type="text" id="fname" name="fname" placeholder="Max">
        </div>
    </div>
</div>

方案2：自定义CSS（无需调整DOM） #

如果不想改动DOM结构，可以直接写自定义CSS来实现跨层级控制：

/* 自定义选择器匹配嵌套的单选按钮和外部div */
#2:checked ~ .new-trade__input-group {
    @apply bg-turquoise-600 hidden;
}

然后移除单选按钮的peer/cred类和目标div的peer-checked/cred类即可。

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