Skip to content

Conversation

@reinink
Copy link
Member

@reinink reinink commented Jul 11, 2022

Resolves #275

This PR updates the strong and code color styles in the typography plugin to inherit parent colors. Right now this isn't the case, and if you add a custom color to say a heading or blockquote, and then include either a <strong> or <code> tag within that element, they will get their default colors...not the custom color of the parent.

For example, like this:

image

With this change the <strong> and <code> elements will now automatically inherit the custom color from the parent:

image

This feels like a more sensible way of handling these child element colors.

@vercel
Copy link

vercel bot commented Jul 11, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
tailwindcss-typography ✅ Ready (Inspect) Visit Preview Jul 11, 2022 at 11:47PM (UTC)

@reinink reinink force-pushed the color-inheritance branch from 1a2192e to 0a6c377 Compare July 12, 2022 00:01
@reinink reinink merged commit 79ce26f into master Jul 12, 2022
@reinink reinink deleted the color-inheritance branch July 12, 2022 16:00
@nwea-jakeweston
Copy link

I ran into this issue for a <p><strong>My text</strong></p>, there's no p strong { in the CSS, so the strong is getting the the --tw-prose-bold color instead.

Curious why <strong> / bold text needs its own color? It seems like it should just default to --tw-font-body and then override it the user wants, something like:

...
strong {
    color: var( --tw-prose-bold, var( --tw-prose-body );
}

Or maybe even:

* strong {
    color: inherit;
}

(I don't know enough. about CSS to know if this is a bad idea or not)

and then remove --tw-prose-bold from the themes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Strong inside <a> causes rendering issues

3 participants