Use :has pseudoclass in tailwind on hover

Question

I have a component with the following structure:

<li key={index} className="custom--item group">
<p className="font-medium mb-2">Person No.{index + 1}</p>
<Button
  variant="danger"
  size="sm"
  {...getRemoveProps(index)}
  type="submit"
  className="custom--delete mt-2"
  >
      <UilTrashAlt className="text-red-300" />
  </Button>
</li>

I'm using Tailwind for styling, and I wanted to achieve the next feature: When hovering on the delete button, the parent(<li>...</li>) opacity should change to 40%.

To achieve that I used this CSS (added to tailwind.css):

.custom--item:has(.custom--delete:hover) {
    opacity: 50%;
    transition: opacity 300ms ease-in-out;
}

So I have achieved what I wanted, and now my question is: Can I do the same without adding the custom--item and custom--delete classes in the tailwind.css?

I've sumbled upon this discussion, and tried using the given example, but it didn't seem to work.