bug: kbd element inside prose class (tailwind typography) doesn't follow daisyUI kbd class style

[shonebinu]

Reproduction URL (Required)

https://play.tailwindcss.com/tbPx0reXPH

What version of daisyUI are you using?

v5.2.3

Which browsers are you seeing the problem on?

All browsers

Describe your issue

kbd element inside .prose (tailwind typography) doesn't follow daisyUI kbd class style

<!-- kbd daisyUI style -->
<kbd class="kbd">Ctrl</kbd>

<div class="prose">
  <h1>Markdown file</h1>
  <kbd>Ctrl</kbd>
</div>

Currently what I'm doing is something like:

<div class="prose prose-kbd:kbd">
</div>

[github-actions]

Thank you @shonebinu for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

daisyUI kbd is a component class, and it is not specified in the documentation that it would be automatically applied to kbd tag.

So I think what you do is the right thing to do - assign the kbd class to the semantic kbd tag for prose.

And in this it looks like it is working as expected: https://play.tailwindcss.com/TmPQEljEDu

[shonebinu]

Since some other tags inside .prose were styled such as headings, I assumed others would follow and I couldn't find anything not saying that way.

Thanks for the information.

[saadeghi]

Headings styles (size, weight, line-height, etc) are coming from Typography plugin. daisyUI only overrides their color to match the current theme.

[shonebinu]

@saadeghi I see.

Since you mentioned colors, I just wanna add something that I found. The color of p tag inside .prose is different from the default p tag color daisyUI has. Is this the expected behavior?

https://play.tailwindcss.com/BIZKzui3Al

[saadeghi]

Yes, the colors inside prose class are adjusted for text content.
paragraphs are text-base-contant/80 (80% opacity)
If you want the same color, use this:
https://play.tailwindcss.com/Dx4Qt5bIhZ?file=css

.prose{
  --tw-prose-body:var(--color-base-content);
}

Let me know if you have a question.