Tailwind: color children links red

Question

I've got some DOM:

<div>
  <p>
    <a>ham</a>
  </p>
</div>

I want to add a class attribute to the DIV to turn all the children a tags red. I know I can do <div class="[&>p>a]:text-red-500"> but the a tags can be at any arbitrary depth within the <div>. Anyone know the syntax to make the links red?

Answer 1

You could consider using a selector in the arbitrary variant that does not have any direct descendent operators:

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

<div class="[&_a]:text-red-500">
  <p>
    <a>ham</a>
  </p>
</div>