如何用Tailwind在input自动填充时设置上层同级label样式？

要实现input自动填充时label变为黑色，由于CSS没有反向选择器无法直接从子级input选中前置的label，我们可以借助Tailwind JIT结合:has()选择器来实现，有两种简洁的方式：

方法1：CSS变量实现状态传递 #

通过父容器的CSS变量关联label的文本颜色，利用:has()检测子元素的autofill状态来修改变量：

<div class="[--label-color:gray-500] [&:has(button>input:autofill)]:[--label-color:black]">
  <label class="text-[--label-color]">Some label</label>
  <button>
    <input />
  </button>
</div>

• 初始状态下，父容器的--label-color设为灰色（可根据需求替换），label继承该变量作为文本色
• 当父容器包含的button>input触发autofill时，自动修改--label-color为黑色，label同步变色

方法2：直接通过:has()控制label样式 #

无需变量，直接让父容器在满足条件时给内部label指定样式：

<div class="[&:has(button>input:autofill)] label:text-black">
  <label class="text-gray-500">Some label</label>
  <button>
    <input />
  </button>
</div>

• 初始label为灰色，当父容器检测到内部button>input处于autofill状态时，强制label变为黑色

为什么你的原有选择器不生效？ #

你写的[&+button>input:autofill~&]:text-black逻辑存在问题：

• &+button表示label的下一个兄弟元素是button，但~&是试图选择input的兄弟元素，而label和input并非同级，这个选择器无法匹配到任何有效元素，因此样式不会生效。

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