Css 如何将此 Select 器转换为TailWind类

发布于11月04日

我try 使用Svelte + Tailwind构建一个组件，并try 在输入处于焦点状态时将 colored颜色应用于标签.

我已经设法使用Vanilla CSS让它工作了，但当我try 通过tailwind 类进行 Select 时，它不起作用，这是我试图放在标签标签上的 Select 器: [&amp；:HAS(~div输入:焦点)]

label:has(~ div input:focus) {
  color: green;
}

<label for="a" class="font-semibold">Label</label>
<div class="flex items-center px-3 gap-x-2 bg-neutral-50 border-neutral-200 border rounded-md">
    <input type="text" id="a" class="grow py-2 bg-transparent focus:outline-0" />
</div>

<script src="https://cdn.tailwindcss.com"></script>

推荐答案

空格分隔类名，因此(根据the documentation)，您需要用下划线(_)转义 Select 器中的空格.因此，如果将类放在<label>元素上，则可以使用任意变量[&:has(~_div_input:focus)]::

<label for="a" class="font-semibold [&:has(~_div_input:focus)]:text-[green]">Label</label>
<div class="flex items-center px-3 gap-x-2 bg-neutral-50 border-neutral-200 border rounded-md">
    <input type="text" id="a" class="grow py-2 bg-transparent focus:outline-0" />
</div>

<script src="https://cdn.tailwindcss.com"></script>