Add prose-kbd element modifier (#340)

* Add `prose-kbd` element modifier Add selector, update readme and tests. * Change order of `kbd` modifier --------- Co-authored-by: Jonathan Reinink <[email protected]>
tailwindlabs · Mar 27, 2024 · 6253ae5 · 6253ae5
1 parent 4056e09
commit 6253ae5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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',