Add prose-inline-code element modifier (#329)

* Add `prose-inline-code` element modifier (add selector, update readme and tests).

README.md

@@ -153,35 +153,36 @@ This makes it easy to do things like style links to match your brand, add a bord
 
 Here's a complete list of available element modifiers:
 
-| Modifier                     | Target                       |
-| ---------------------------- | ---------------------------- |
-| `prose-headings:{utility}`   | `h1`, `h2`, `h3`, `h4`, `th` |
-| `prose-lead:{utility}`       | `[class~="lead"]`            |
-| `prose-h1:{utility}`         | `h1`                         |
-| `prose-h2:{utility}`         | `h2`                         |
-| `prose-h3:{utility}`         | `h3`                         |
-| `prose-h4:{utility}`         | `h4`                         |
-| `prose-p:{utility}`          | `p`                          |
-| `prose-a:{utility}`          | `a`                          |
-| `prose-blockquote:{utility}` | `blockquote`                 |
-| `prose-figure:{utility}`     | `figure`                     |
-| `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`                         |
-| `prose-ul:{utility}`         | `ul`                         |
-| `prose-li:{utility}`         | `li`                         |
-| `prose-table:{utility}`      | `table`                      |
-| `prose-thead:{utility}`      | `thead`                      |
-| `prose-tr:{utility}`         | `tr`                         |
-| `prose-th:{utility}`         | `th`                         |
-| `prose-td:{utility}`         | `td`                         |
-| `prose-img:{utility}`        | `img`                        |
-| `prose-video:{utility}`      | `video`                      |
-| `prose-hr:{utility}`         | `hr`                         |
+| Modifier                      | Target                       |
+| ----------------------------- | ---------------------------- |
+| `prose-headings:{utility}`    | `h1`, `h2`, `h3`, `h4`, `th` |
+| `prose-lead:{utility}`        | `[class~="lead"]`            |
+| `prose-h1:{utility}`          | `h1`                         |
+| `prose-h2:{utility}`          | `h2`                         |
+| `prose-h3:{utility}`          | `h3`                         |
+| `prose-h4:{utility}`          | `h4`                         |
+| `prose-p:{utility}`           | `p`                          |
+| `prose-a:{utility}`           | `a`                          |
+| `prose-blockquote:{utility}`  | `blockquote`                 |
+| `prose-figure:{utility}`      | `figure`                     |
+| `prose-figcaption:{utility}`  | `figcaption`                 |
+| `prose-strong:{utility}`      | `strong`                     |
+| `prose-em:{utility}`          | `em`                         |
+| `prose-kbd:{utility}`         | `kbd`                        |
+| `prose-inline-code:{utility}` | `inline code`                |
+| `prose-code:{utility}`        | `code`                       |
+| `prose-pre:{utility}`         | `pre`                        |
+| `prose-ol:{utility}`          | `ol`                         |
+| `prose-ul:{utility}`          | `ul`                         |
+| `prose-li:{utility}`          | `li`                         |
+| `prose-table:{utility}`       | `table`                      |
+| `prose-thead:{utility}`       | `thead`                      |
+| `prose-tr:{utility}`          | `tr`                         |
+| `prose-th:{utility}`          | `th`                         |
+| `prose-td:{utility}`          | `td`                         |
+| `prose-img:{utility}`         | `img`                        |
+| `prose-video:{utility}`       | `video`                      |
+| `prose-hr:{utility}`          | `hr`                         |
 
 When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come first:
 

demo/pages/inline-code.js

@@ -0,0 +1,50 @@
+import Head from 'next/head'
+
+export default function Index() {
+  return (
+    <div className="antialiased text-gray-900 py-12 pl-32 space-y-12">
+      <Head>
+        <title>Tailwind CSS Typography</title>
+      </Head>
+      <div className="relative">
+        <div className="relative prose prose-lg prose-code:text-sky-500">
+          <h3>reaching all code</h3>
+          <pre>
+            <code>
+              <span className="block">console.log('test 1')</span>
+              <span className="block">console.log('test 2')</span>
+              <span className="block">console.log('test 3')</span>
+            </code>
+          </pre>
+          <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet deleniti quis veniam{' '}
+            <code>console.log('test inline')</code> repudiandae optio in at quibusdam autem vero
+            excepturi.
+          </p>
+        </div>
+      </div>
+      <div className="relative">
+        <div className="relative prose prose-lg prose-inline-code:text-rose-500">
+          <h3>reaching inline code only</h3>
+          <pre>
+            <code>
+              <span className="block">console.log('test 1')</span>
+              <span className="block">console.log('test 2')</span>
+              <span className="block">console.log('test 3')</span>
+            </code>
+          </pre>
+          <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet deleniti quis veniam
+            debitis vel, hic sunt, nulla deserunt animi iure aliquid et,{' '}
+            <code>console.log('test inline')</code> repudiandae optio in at quibusdam autem vero
+            excepturi.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const config = {
+  unstable_runtimeJS: false,
+}

src/index.js

@@ -91,6 +91,7 @@ module.exports = plugin.withOptions(
         ['strong'],
         ['em'],
         ['kbd'],
+        ['inline-code', ':not(pre)>code'],
         ['code'],
         ['pre'],
         ['ol'],

src/index.test.js

@@ -696,6 +696,7 @@ test('element variants', async () => {
             prose-strong:font-medium
             prose-em:italic
             prose-kbd:border-b-2
+            prose-inline-code:px-4
             prose-code:font-mono
             prose-pre:font-mono
             prose-ol:pl-6
@@ -812,6 +813,11 @@ test('element variants', async () => {
           :is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-bottom-width: 2px;
         }
+        .prose-inline-code\:px-4
+          :is(:where(:not(pre) > code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
         .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',