Bold colour overwrites link styling

[stephenafamo]

If a link text is also bold, the prose strong styling gets a higher priority than prose a

This means that bold links have no colour 😢

[Healios]

I also have this issue...

I have been able to solve it by customizing prose in tailwind.config.js like so:
strong: { color: "unset", },

The pertinent question though is, why does .prose strong even have a color? Should it not just have a weight, and only a weight?

[simonswiss]

Hey! Going to close this issue since this is not something that happens anymore with the new version of the Typography plugin, where we use flat selectors to apply styles.

[fabswt]

Let me know if I missed something, but I think this is still happening with v0.5.2.

With this HTML:

<a href="https://bilingueanglais.com/blog/552/comment-comprendre-anglais-parle/"><strong>comprendre l'anglais oral</strong></a>

I get this CSS:

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

where --tw-prose-bold is black and overwrites my link color.

Had to add this entry to tailwind.config.js to circumvent the issue:

            '--tw-prose-bold': 'inherit',

[danielius-adface]

Yeah, why does even have a color set? Don't <b and <strong usually inherit colors?

[liyasthomas]

This issue still exists even in the latest version. Strong text has a color: var(--tw-prose-bold) attribute. Anybody found a fix?

[tobiase]

Thank you, @fabswt! Your suggestion resolved the issue for me.
Here is a more complete example:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            "--tw-prose-bold": "inherit",
          },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
  ],
};