Strong inside <a> causes rendering issues

[surjithctly]

What version of @tailwindcss/typography are you using?

3.1.0

What version of Node.js are you using?

v16.0

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction repository

https://play.tailwindcss.com/VTb5NkiKvQ

Describe your issue

I have a simple usecase where <strong> tag is inserted inside <strong><a> but this doesn't display as expected.

I have given prose-violet and also prose-a:text-violet-500 but the color renders as black except the underline.

The sample code:

<div class="prose prose-violet prose-a:text-violet-500 p-16"> 
  <p>
    <strong>It is recommended to go through</strong>
    <a href="#" rel="noopener" target="_blank">
      <strong>Rollup's plugin documentation</strong>
    </a>
    <strong>first before reading the sections below.</strong>
  </p>
</div>

The current result.

Expected Result:

Live reproducible demo on Tailwind Play
https://play.tailwindcss.com/VTb5NkiKvQ

Thank you!

[surjithctly]

Just noticed it affects the same for headings as well. Possibly everywhere strong is used inside.

Style causing this issue:

.prose :where(strong):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-bold); /* this is black */
    font-weight: 600;
}

Possible fix:

Do we really need a color variable for strong since it can be inherited from the parent? Not sure!

[thecrypticace]

Gonna be thinking this one through some today but as a quick fix you can add the following to your CSS to work around the problem:

.prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: inherit;
}

[adamwathan]

Do we really need a color variable for strong since it can be inherited from the parent? Not sure!

The main reason we do this is because <strong> tags have a different color than regular paragraph text in our default CSS (strong text is darker).

Probably can come up with a way to make this not happen by default though.

[reinink]

@surjithctly Hey thanks for reporting this. We've just made an update to this plugin where the strong and code color styles now inherit from their parent in headings, links, and blockquotes. I think this is generally a better default for these styles, and you can still override them if needed by adding custom styles 👍

[surjithctly]

Thank you 🙏