Tailwind中与子元素交互时应用父元素样式：选中复选框移除父div阴影

可以实现，只要你使用的是Tailwind v3.4及以上版本（内置支持:has()修饰符，目前主流新版本浏览器均已兼容该伪类）。

你现有写法的问题在于逻辑搞反了：peer需要加在你要监听状态的元素（也就是复选框input）上，而且默认peer-*修饰符只能匹配同级且位于peer元素之后的其他元素，既不能选中父级元素，也不能选中位于peer之前的同级元素，所以你的原有代码不会生效。

正确的写法参考如下：

写法1：最简通用版 #

直接用has-[:checked]匹配包含选中复选框的父元素：

<div class="shadow has-[:checked]:shadow-none">
  <input type="checkbox" />
</div>

写法2：精准匹配版 #

配合peer使用，避免父级内其他复选框选中时误触发效果：

<div class="shadow has-[>.target-checkbox:checked]:shadow-none">
  <!-- 只有这个复选框选中时才会移除父级阴影 -->
  <input type="checkbox" class="target-checkbox" />
  <!-- 父级内其他复选框不会触发效果 -->
  <input type="checkbox" />
</div>

如果你用的是低于3.4版本的Tailwind，只需要在tailwind.config.js中自定义:has()相关变体即可支持，不需要额外写业务JS，也可以完全用Tailwind工具类实现需求。

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