如何基于兄弟元素后代的peer选中状态设置Tailwind元素样式

问题分析 #

你的结构中，复选框是某个父元素的后代，目标元素是该父元素的兄弟元素，Tailwind默认的peer只能处理直接兄弟关系，因此需要用**任意变体（arbitrary variants）**结合CSS选择器来实现需求。

解决方案代码 #

<div class="checkbox-container">
  <input type="checkbox" />
</div>
<div class="[.checkbox-container:has(input:checked) ~ &]:text-red-600">
  <div>
     Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
     Salutantibus vitae elit libero, a pharetra augue. Quam diu 
     etiam furor iste tuus nos eludet? Fabio vel iudice vincam, 
     sunt in culpa qui officia. Quam temere in vitiis, legem 
     sancimus haerentia. Quisque ut dolor gravida, placerat libero
     vel, euismod.
  </div>
</div>

代码解释 #

• 给包含复选框的父元素添加checkbox-container类作为标识
• 目标元素的任意变体[.checkbox-container:has(input:checked) ~ &]的含义：
  1. .checkbox-container:has(input:checked)：检测包含复选框的父元素内是否有选中的复选框
  2. ~ &：表示当前目标元素是.checkbox-container的后续兄弟元素
  3. 组合后，当复选框被选中时，目标元素会应用text-red-600样式

注意事项 #

• 确保浏览器支持CSS :has()选择器（Chrome 105+、Firefox 121+、Safari 15.4+均已支持）
• 若需兼容旧版浏览器，可通过JavaScript监听复选框的change事件，手动给目标元素添加/移除样式类

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