Using :has in Tailwind with adjacent sibling selectors

I have the following CSS, which works as intended.

[data-type='transfer']:has(+ [data-type^='sale_']) {
  opacity: 0.25;
}

It looks at data attributes and will hide elements with data-type="transfer if they are adjacent to elements containing data attributes starting with "sale_". For clarity, I reduced the opacity instead of hiding the element, to make things as clear as possible what I'm doing.

Here it is in a quick demo:

[data-type='transfer']:has(+ [data-type^='sale_']) {
  opacity: 0.25;
}

<ul>
  <li data-type="transfer">a transfer</li>
  <li data-type="sale_buyer">a buyer sale</li>  
  <li data-type="transfer">a transfer</li>
  <li data-type="sale_seller">a seller sale</li>    
</ul>

How can I convert the working CSS above into Tailwind code now that :has is supported? I tried something like this, but it's not working:

<li className='has-[[data-type="transfer"] + [data-type^="sale_"]]:hidden'>...</li>

Tailwind :has

The below colors (in red) an element with [data-type='c'] attribute which has a next sibling with [data-type='c1'] attribute

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<ul class="[&>[data-type='c']:has(+[data-type='c1'])]:text-red-500">
  <li data-type="a">a transfer</li>
  <li data-type="b">a buyer sale</li>  
  <li data-type="c">a transfer</li>
  <li data-type="c1">a seller sale</li>    
</ul>

👉 See live demo