Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update strong and code colors to inherit from parent #276

Merged
merged 1 commit into from
Jul 12, 2022

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
2 participants