如何使用 Tailwind CSS 在 input:focus 的前一个兄弟上设置 textColor？

Posted 2023-03-06

【中文标题】如何使用 Tailwind CSS 在 input:focus 的前一个兄弟上设置 textColor？

【英文标题】：How can I set the textColor on a preceding sibling of a input:focus using Tailwind CSS?

【发布时间】：2022-01-20 18:19:21

【问题描述】：

我有一种情况，我需要更改标签的文本颜色，其中以下兄弟是输入，当它聚焦时。

div(class='form-control')
  label(class='label ...')
  input(type='text')

我能想到的最好的方法是将标签移动到输入之后，使用相邻的兄弟选择器input:focus + label

input:focus + label 
  @apply text-green-500;

...然后用 flexbox flex-direction 反转顺序...但这意味着我需要将样式分离到单独的 CSS 文件中，并且将顺序“向后”放置非常烦人...

是否有任何提示、技巧或 Tailwind 实用程序来支持此用例？

【参考方案1】：

您可以使用group 和group-focus-within 实用程序并保持您的标记不变。

<div class="group">
  <label class="group-focus-within:text-red-600">Some text</label>
  <input class="..." />
</div>

现在所有主要的现代浏览器都支持Focus-within。

Tailwind play https://play.tailwindcss.com/7BRw4QLbly