How to convert this selector into a Tailwind class-CodePudding

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" >Label</label>
<div >
    <input type="text" id="a"  />
</div>

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

CodePudding user response：

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" >Label</label>
<div >
    <input type="text" id="a"  />
</div>

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