Default styles for `kbd` tag

[deadcoder0904]

What version of @tailwindcss/typography are you using?

v0.4.1

What version of Node.js are you using?

v16.3.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/YZS1I4iDer

Describe your issue

kbd tag style should look like keyboard.

Try out the following & see it's styled differently.

<article class="prose mx-6 mt-10">
  <h1>`kbd` tag below is styled incorrectly</h1>
  <kbd>Enter</kbd>
</article>

Or check out the Tailwind Play here -> https://play.tailwindcss.com/YZS1I4iDer

By default it should look like on here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd or https://meta.superuser.com/questions/4788/css-for-the-new-kbd-style

I know I can do it in my project but a default style wouldn't hurt :)

[ArnaudLier]

In the meantime, I use this styling:

kbd {
    background-color: #1F2937; /* coolGray-800 */
    color: #94A3B8; /* blueGray-400 */
    padding: 3px 5px;
    border: solid 1px #6B7280; /* coolGray-500 */
    border-radius: 6px
}

[Svish]

@ArnaudLier Could you add a screenshot to your post for what those styles look like in the context of prose text?

[reinink]

Hey! Thanks for this suggestion. I've just added <kbd> styles in #317 🤙

[deadcoder0904]

woot, thanks!