I’m trying to build a component using Svelte + Tailwind, and i’m trying to apply a color to the label when the input is in the focus state.
I’ve managed to make it work using the Vanilla CSS, but when i’ve tried to select via tailwind class, it didn’t work, this is the selector i’ve tried to put on the label tag:
[&:has(~ div input:focus)]
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>
>Solution :
Spaces delimit class names, so (as per the documentation], you’d need to escape the spaces in the selector with an underscore (_). Hence, if the class would be placed on the <label> element, then you’d use the arbitrary variant [&: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>