如何使用Tailwind CSS在输入的前一个同级上设置textColor:焦点

Question

我遇到一种情况，需要更改以下同级是输入的标签的文本颜色。

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

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

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

然后用flexboxflex-direction反转顺序。。。但这意味着我需要将样式分离到单独的CSS文件中，并且将顺序"向后"是非常令人讨厌的。。。

有什么技巧、窍门或顺风实用程序可以支持这个用例吗？

Answer 1

您可以使用group和group-focus-within实用程序并保持标记原样。

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

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

这是《顺风》节目https://play.tailwindcss.com/7BRw4QLbly

Answer 2

对我来说，这个答案是有效的，通过在外部div的类上设置css中的：focus-inten属性。在您的情况下，它将是：

form-control:focus-within label {
@apply text-green-500;
}