How to combine multiple arbitrary values such as :has in Tailwind

I have a problem where I want an element to not show, if it has children.

In plain CSS this is:

&:not(:has(*)){
 display: none
}

However, in Tailwind I can not figure it out. I've tried few things such as below, but none would work:

[&:not(:has(*)):hidden] 
[&:not([&:has(*)]):hidden]

Is there a way to combine multiple arbitrary values?

Your syntax is incorrect – you'd want the class attached to the variant to be outside the square brackets:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>
<div class="[&:not(:has(*))]:hidden">
  Foo
</div>
<div class="[&:not(:has(*))]:hidden">
  <div>Bar</div>
</div>

<!-- end snippet -->