如何用TailwindCSS实现子输入框聚焦时改变父div边框颜色

Tailwind CSS v3及以上版本支持focus-within伪类，可直接实现子元素聚焦时修改父容器样式的需求，无需自定义CSS类。

修改后的代码示例：

<div class="parent border focus-within:border-red-500">
  <img class="icon">
  <input class="child" type="text">
</div>

关键说明： #

• focus-within:border-red-500：当容器内的子元素（此处为输入框）处于聚焦状态时，为父容器设置红色边框
• 可按需添加transition-colors类实现边框颜色的平滑过渡，或调整边框宽度、红色色值（如border-red-600）以匹配设计需求

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