如果子输入获得焦点，则更改父 div 的边框颜色 - TailwindCSS

Question

我知道 TailwindCSS 有group要使用的类，但这仅用于当父元素激活某些事件时更改子元素的样式，但我希望反之亦然。

<div class="parent"> <!-- border color should be red when child is focused -->
  <img class="icon">
  <input class="child" type="text">
</div>

而且我不想重写 css 类。只需使用 TailwindCSS。

Answer 1

使用焦点内变体

<!-- border will be red when input focuesd -->
<div class="focus-within:border-red-500 border">
  <img class="icon">
  <input class="" type="text">
</div>

演示版