diff --git a/README.md b/README.md index f428984..950c9a5 100644 --- a/README.md +++ b/README.md @@ -168,6 +168,7 @@ Here's a complete list of available element modifiers: | `prose-figcaption:{utility}` | `figcaption` | | `prose-strong:{utility}` | `strong` | | `prose-em:{utility}` | `em` | +| `prose-kbd:{utility}` | `kbd` | | `prose-code:{utility}` | `code` | | `prose-pre:{utility}` | `pre` | | `prose-ol:{utility}` | `ol` | diff --git a/src/index.js b/src/index.js index 7b32ca7..04830b9 100644 --- a/src/index.js +++ b/src/index.js @@ -90,6 +90,7 @@ module.exports = plugin.withOptions( ['figcaption'], ['strong'], ['em'], + ['kbd'], ['code'], ['pre'], ['ol'], diff --git a/src/index.test.js b/src/index.test.js index 94e3552..8db6c6c 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -695,6 +695,7 @@ test('element variants', async () => { prose-figcaption:opacity-75 prose-strong:font-medium prose-em:italic + prose-kbd:border-b-2 prose-code:font-mono prose-pre:font-mono prose-ol:pl-6 @@ -807,6 +808,10 @@ test('element variants', async () => { :is(:where(em):not(:where([class~='not-prose'], [class~='not-prose'] *))) { font-style: italic; } + .prose-kbd\:border-b-2 + :is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) { + border-bottom-width: 2px; + } .prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', @@ -889,6 +894,7 @@ test('element variants with custom class name', async () => { markdown-figcaption:opacity-75 markdown-strong:font-medium markdown-em:italic + markdown-kbd:border-b-2 markdown-code:font-mono markdown-pre:font-mono markdown-ol:pl-6 @@ -1003,6 +1009,10 @@ test('element variants with custom class name', async () => { :is(:where(em):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) { font-style: italic; } + .markdown-kbd\:border-b-2 + :is(:where(kbd):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) { + border-bottom-width: 2px; + } .markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',