@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.e057044 to 0.0.0-insiders.e366340

CHANGELOG.md

@@ -10,4 +10,17 @@ # Changelog
 
-- Nothing yet!
+### Fixed
 
+- Fix space between `<figcaption>` and `<pre>` ([#313](https://github.com/tailwindlabs/tailwindcss-typography/pull/313))
+- Remove typography styles from `not-prose` elements in addition to their children ([#301](https://github.com/tailwindlabs/tailwindcss-typography/pull/301))
+- Add `<picture>` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314))
+- Fix `prose-invert` when used with colors in light mode ([#315](https://github.com/tailwindlabs/tailwindcss-typography/pull/315))
+- Add `<kbd>` styles ([#317](https://github.com/tailwindlabs/tailwindcss-typography/pull/317))
+- Add description list (`<dl>`, `<dt>`, `<dd>`) styles ([#316](https://github.com/tailwindlabs/tailwindcss-typography/pull/316))
+
+## [0.5.9] - 2023-01-10
+
+### Fixed
+
+- Ensure `p` styles are inserted before `.lead` styles ([#294](https://github.com/tailwindlabs/tailwindcss-typography/pull/294))
+
 ## [0.5.8] - 2022-11-07
@@ -162,3 +175,5 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.7...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.9...HEAD
+[0.5.9]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.8...v0.5.9
+[0.5.8]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.7...v0.5.8
 [0.5.7]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.6...v0.5.7
@@ -165,0 +180,0 @@ [0.5.6]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.5...v0.5.6

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.0.0-insiders.e057044",
+  "version": "0.0.0-insiders.e366340",
   "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

 <p>
-  <a href="https://tailwindcss.com/docs/typography-plugin#gh-light-mode-only" target="_blank">
-    <img src="./.github/logo-light.svg" alt="Tailwind CSS Typography" width="450" height="70">
+  <a href="https://tailwindcss.com/docs/typography-plugin" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg">
+      <img alt="Tailwind CSS Typography" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg" width="450" height="70" style="max-width: 100%;">
+    </picture>
   </a>
-  <a href="https://tailwindcss.com/docs/typography-plugin#gh-dark-mode-only" target="_blank">
-    <img src="./.github/logo-dark.svg" alt="Tailwind CSS Typography" width="450" height="70">
-  </a>
 </p>
@@ -9,0 +10,0 @@

src/index.js

@@ -22,6 +22,6 @@ const plugin = require('tailwindcss/plugin')
   if (trailingPseudo) {
-    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"] *))${trailingPseudo}`
+    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
   }
 
-  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"] *))`
+  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`
 }
@@ -28,0 +28,0 @@

src/index.test.js

@@ -143,36 +143,41 @@ const path = require('path')
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
         }
-        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
+        .prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           list-style-type: upper-alpha;
         }
-        .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
+        .prose
+          :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::before {
           content: open-quote;
         }
-        .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+        .prose
+          :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::after {
           content: close-quote;
         }
-        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-weight: 700;
         }
-        .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
+        .prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin: 0;
         }
-        .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
+        .prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
           font-weight: 400;
           color: var(--tw-prose-counters);
         }
-        .prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) {
+        .prose
+          :where(.prose > ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 16px;
           margin-bottom: 16px;
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::before {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
           content: '`';
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::after {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
           content: '`';
@@ -234,7 +239,9 @@ }
         }
-        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'] *)) {
+        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: tomato;
         }
         .hover\:prose-lg:hover
-          :where(.hover\:prose-lg:hover > ul > li):not(:where([class~='not-prose'] *)) {
+          :where(.hover\:prose-lg:hover
+            > ul
+            > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: blue;
@@ -246,6 +253,7 @@ }
           }
-          .sm\:prose :where(p):not(:where([class~='not-prose'] *)) {
+          .sm\:prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
             color: lime;
           }
-          .sm\:prose :where(.sm\:prose > ul > li):not(:where([class~='not-prose'] *)) {
+          .sm\:prose
+            :where(.sm\:prose > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
             color: purple;
@@ -258,6 +266,8 @@ }
           }
-          .lg\:prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+          .lg\:prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
             color: tomato;
           }
-          .lg\:prose-lg :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+          .lg\:prose-lg
+            :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose']
+                *)) {
             color: blue;
@@ -366,32 +376,36 @@ }
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
         }
-        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
+        .prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           list-style-type: upper-alpha;
         }
-        .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
+        .prose
+          :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::before {
           content: open-quote;
         }
-        .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+        .prose
+          :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::after {
           content: close-quote;
         }
-        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-weight: 700;
         }
-        .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
+        .prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin: 0;
         }
-        .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
+        .prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
           font-weight: 400;
           color: var(--tw-prose-counters);
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::before {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
           content: '`';
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::after {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
           content: '`';
@@ -403,17 +417,19 @@ }
         }
-        .prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 24px;
           margin-bottom: 24px;
         }
-        .prose-lg :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose-lg
+          :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 22px;
         }
-        .prose-lg :where(blockquote):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 40px;
           margin-bottom: 40px;
         }
-        .prose-lg :where(.prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+        .prose-lg
+          :where(.prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           padding-left: 12px;
         }
-        .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 48px;
@@ -423,3 +439,3 @@ margin-top: 0;
         }
-        .prose-lg :where(h2):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 30px;
@@ -429,3 +445,3 @@ margin-top: 56px;
         }
-        .prose-lg :where(h3):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 24px;
@@ -621,33 +637,44 @@ margin-top: 40px;
         }
-        .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-lead);
         }
-        .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
+        .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .markdown :where(ol[type='A']):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(ol[type='A']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           list-style-type: upper-alpha;
         }
         .markdown
-          :where(blockquote p:first-of-type):not(:where([class~='not-markdown'] *))::before {
+          :where(blockquote
+            p:first-of-type):not(:where([class~='not-markdown'], [class~='not-markdown']
+              *))::before {
           content: open-quote;
         }
-        .markdown :where(blockquote p:last-of-type):not(:where([class~='not-markdown'] *))::after {
+        .markdown
+          :where(blockquote
+            p:last-of-type):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {
           content: close-quote;
         }
-        .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           font-weight: 700;
         }
-        .markdown :where(figure > *):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(figure > *):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           margin: 0;
         }
-        .markdown :where(ol > li):not(:where([class~='not-markdown'] *))::marker {
+        .markdown
+          :where(ol > li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::marker {
           font-weight: 400;
           color: var(--tw-prose-counters);
         }
-        .markdown :where(code):not(:where([class~='not-markdown'] *))::before {
+        .markdown
+          :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::before {
           content: '`';
         }
-        .markdown :where(code):not(:where([class~='not-markdown'] *))::after {
+        .markdown
+          :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {
           content: '`';
@@ -727,99 +754,121 @@ }
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
         }
-        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-weight: 700;
         }
         .prose-headings\:underline
-          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'], [class~='not-prose']
+                *))) {
           text-decoration-line: underline;
         }
-        .prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
+        .prose-h1\:text-3xl
+          :is(:where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.875rem;
           line-height: 2.25rem;
         }
-        .prose-h2\:text-2xl :is(:where(h2):not(:where([class~='not-prose'] *))) {
+        .prose-h2\:text-2xl
+          :is(:where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.5rem;
           line-height: 2rem;
         }
-        .prose-h3\:text-xl :is(:where(h3):not(:where([class~='not-prose'] *))) {
+        .prose-h3\:text-xl
+          :is(:where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.25rem;
           line-height: 1.75rem;
         }
-        .prose-h4\:text-lg :is(:where(h4):not(:where([class~='not-prose'] *))) {
+        .prose-h4\:text-lg
+          :is(:where(h4):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.125rem;
           line-height: 1.75rem;
         }
-        .prose-p\:text-gray-700 :is(:where(p):not(:where([class~='not-prose'] *))) {
+        .prose-p\:text-gray-700
+          :is(:where(p):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           --tw-text-opacity: 1;
           color: rgb(55 65 81 / var(--tw-text-opacity));
         }
-        .prose-a\:font-bold :is(:where(a):not(:where([class~='not-prose'] *))) {
+        .prose-a\:font-bold
+          :is(:where(a):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-weight: 700;
         }
-        .prose-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-prose'] *))) {
+        .prose-blockquote\:italic
+          :is(:where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
-        .prose-figure\:mx-auto :is(:where(figure):not(:where([class~='not-prose'] *))) {
+        .prose-figure\:mx-auto
+          :is(:where(figure):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-left: auto;
           margin-right: auto;
         }
-        .prose-figcaption\:opacity-75 :is(:where(figcaption):not(:where([class~='not-prose'] *))) {
+        .prose-figcaption\:opacity-75
+          :is(:where(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           opacity: 0.75;
         }
-        .prose-strong\:font-medium :is(:where(strong):not(:where([class~='not-prose'] *))) {
+        .prose-strong\:font-medium
+          :is(:where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-weight: 500;
         }
-        .prose-em\:italic :is(:where(em):not(:where([class~='not-prose'] *))) {
+        .prose-em\:italic
+          :is(:where(em):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
-        .prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'] *))) {
+        .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',
             'Courier New', monospace;
         }
-        .prose-pre\:font-mono :is(:where(pre):not(:where([class~='not-prose'] *))) {
+        .prose-pre\:font-mono
+          :is(:where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
             'Courier New', monospace;
         }
-        .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'] *))) {
+        .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           padding-left: 1.5rem;
         }
-        .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'] *))) {
+        .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           padding-left: 2rem;
         }
-        .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'] *))) {
+        .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 1rem;
           margin-bottom: 1rem;
         }
-        .prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'] *))) {
+        .prose-table\:my-8
+          :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 2rem;
           margin-bottom: 2rem;
         }
-        .prose-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-prose'] *))) {
+        .prose-thead\:border-red-300
+          :is(:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(252 165 165 / var(--tw-border-opacity));
         }
-        .prose-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-prose'] *))) {
+        .prose-tr\:border-red-200
+          :is(:where(tr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(254 202 202 / var(--tw-border-opacity));
         }
-        .prose-th\:text-left :is(:where(th):not(:where([class~='not-prose'] *))) {
+        .prose-th\:text-left
+          :is(:where(th):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           text-align: left;
         }
-        .prose-img\:rounded-lg :is(:where(img):not(:where([class~='not-prose'] *))) {
+        .prose-img\:rounded-lg
+          :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-radius: 0.5rem;
         }
-        .prose-video\:my-12 :is(:where(video):not(:where([class~='not-prose'] *))) {
+        .prose-video\:my-12
+          :is(:where(video):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 3rem;
           margin-bottom: 3rem;
         }
-        .prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
+        .prose-hr\:border-t-2
+          :is(:where(hr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-top-width: 2px;
         }
-        .prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
+        .prose-lead\:italic
+          :is(:where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
@@ -900,44 +949,54 @@ }
         }
-        .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-lead);
         }
-        .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
+        .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           font-weight: 700;
         }
         .markdown-headings\:underline
-          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'], [class~='not-markdown']
+                *))) {
           text-decoration-line: underline;
         }
-        .markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
+        .markdown-h1\:text-3xl
+          :is(:where(h1):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.875rem;
           line-height: 2.25rem;
         }
-        .markdown-h2\:text-2xl :is(:where(h2):not(:where([class~='not-markdown'] *))) {
+        .markdown-h2\:text-2xl
+          :is(:where(h2):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.5rem;
           line-height: 2rem;
         }
-        .markdown-h3\:text-xl :is(:where(h3):not(:where([class~='not-markdown'] *))) {
+        .markdown-h3\:text-xl
+          :is(:where(h3):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.25rem;
           line-height: 1.75rem;
         }
-        .markdown-h4\:text-lg :is(:where(h4):not(:where([class~='not-markdown'] *))) {
+        .markdown-h4\:text-lg
+          :is(:where(h4):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.125rem;
           line-height: 1.75rem;
         }
-        .markdown-p\:text-gray-700 :is(:where(p):not(:where([class~='not-markdown'] *))) {
+        .markdown-p\:text-gray-700
+          :is(:where(p):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           --tw-text-opacity: 1;
           color: rgb(55 65 81 / var(--tw-text-opacity));
         }
-        .markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
+        .markdown-a\:font-bold
+          :is(:where(a):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-weight: 700;
         }
         .markdown-blockquote\:italic
-          :is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
+          :is(:where(blockquote):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-style: italic;
         }
-        .markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
+        .markdown-figure\:mx-auto
+          :is(:where(figure):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-left: auto;
@@ -947,55 +1006,71 @@ margin-right: auto;
         .markdown-figcaption\:opacity-75
-          :is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
+          :is(:where(figcaption):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           opacity: 0.75;
         }
-        .markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
+        .markdown-strong\:font-medium
+          :is(:where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-weight: 500;
         }
-        .markdown-em\:italic :is(:where(em):not(:where([class~='not-markdown'] *))) {
+        .markdown-em\:italic
+          :is(:where(em):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-style: italic;
         }
-        .markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'] *))) {
+        .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',
             'Courier New', monospace;
         }
-        .markdown-pre\:font-mono :is(:where(pre):not(:where([class~='not-markdown'] *))) {
+        .markdown-pre\:font-mono
+          :is(:where(pre):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
             'Courier New', monospace;
         }
-        .markdown-ol\:pl-6 :is(:where(ol):not(:where([class~='not-markdown'] *))) {
+        .markdown-ol\:pl-6
+          :is(:where(ol):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           padding-left: 1.5rem;
         }
-        .markdown-ul\:pl-8 :is(:where(ul):not(:where([class~='not-markdown'] *))) {
+        .markdown-ul\:pl-8
+          :is(:where(ul):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           padding-left: 2rem;
         }
-        .markdown-li\:my-4 :is(:where(li):not(:where([class~='not-markdown'] *))) {
+        .markdown-li\:my-4
+          :is(:where(li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 1rem;
           margin-bottom: 1rem;
         }
-        .markdown-table\:my-8 :is(:where(table):not(:where([class~='not-markdown'] *))) {
+        .markdown-table\:my-8
+          :is(:where(table):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 2rem;
           margin-bottom: 2rem;
         }
-        .markdown-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-markdown'] *))) {
+        .markdown-thead\:border-red-300
+          :is(:where(thead):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(252 165 165 / var(--tw-border-opacity));
         }
-        .markdown-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-markdown'] *))) {
+        .markdown-tr\:border-red-200
+          :is(:where(tr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(254 202 202 / var(--tw-border-opacity));
         }
-        .markdown-th\:text-left :is(:where(th):not(:where([class~='not-markdown'] *))) {
+        .markdown-th\:text-left
+          :is(:where(th):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           text-align: left;
         }
-        .markdown-img\:rounded-lg :is(:where(img):not(:where([class~='not-markdown'] *))) {
+        .markdown-img\:rounded-lg
+          :is(:where(img):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           border-radius: 0.5rem;
         }
-        .markdown-video\:my-12 :is(:where(video):not(:where([class~='not-markdown'] *))) {
+        .markdown-video\:my-12
+          :is(:where(video):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 3rem;
           margin-bottom: 3rem;
         }
-        .markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
+        .markdown-hr\:border-t-2
+          :is(:where(hr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           border-top-width: 2px;
         }
-        .markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
+        .markdown-lead\:italic
+          :is(:where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown']
+                *))) {
           font-style: italic;
@@ -1076,3 +1151,3 @@ }
     expect(result.css).toIncludeCss(css`
-      .prose :where(a):not(:where([class~='not-prose'] *)) {
+      .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
         color: #888;
@@ -1085,3 +1160,3 @@ text-decoration: underline;
     expect(result.css).toIncludeCss(css`
-      .prose :where(a):not(:where([class~='not-prose'] *)):hover {
+      .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)):hover {
         color: #ff0000;
@@ -1105,7 +1180,7 @@ }
     expect(result.css).toIncludeCss(css`
-      .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'] *))) {
+      .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
         font-size: 0.875rem;
         line-height: 1.25rem;
       }
-      .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'] *))) {
+      .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
         font-size: 1.25rem;
@@ -1142,3 +1217,5 @@ line-height: 1.75rem;
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before {
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
         color: red;
@@ -1174,3 +1251,5 @@ }
     expect(result.css).toIncludeCss(css`
-      .prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::marker::before {
+      .prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::marker::before {
         color: red;
@@ -1183,3 +1262,6 @@ }
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before::marker {
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::before::marker {
         color: red;
@@ -1215,3 +1297,5 @@ }
     expect(result.css).toIncludeCss(css`
-      .prose :where(ol li::before, ul li::after):not(:where([class~='not-prose'] *)) {
+      .prose
+        :where(ol li::before, ul li::after):not(:where([class~='not-prose'], [class~='not-prose']
+            *)) {
         color: red;
@@ -1223,3 +1307,5 @@ }
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before,
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose'] *))::before,
       ::after {
@@ -1257,4 +1343,4 @@ color: red;
       .prose
-        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
-            *))::before {
+        :where(ol li::scroll-thumb, ul
+          li::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
         color: red;
@@ -1266,3 +1352,6 @@ }
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::scroll-thumb,
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::scroll-thumb,
       ::scroll-track,
@@ -1302,3 +1391,3 @@ ::before {
         :where(ol li::before::scroll-thumb, ul
-          li::before::scroll-track):not(:where([class~='not-prose'] *)) {
+          li::before::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
         color: red;
@@ -1312,4 +1401,4 @@ }
         .dark\:prose
-        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
-            *))::before,
+        :where(ol li::scroll-thumb, ul
+          li::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *))::before,
       ::before {
@@ -1321,1 +1410,29 @@ color: red;
 })
+
+test('lead styles are inserted after paragraph styles', async () => {
+  let config = {
+    content: [{ raw: html`<div class="prose"></div>` }],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(
+      css`
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+          margin-top: 1.25em;
+          margin-bottom: 1.25em;
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+          font-size: 1.25em;
+          line-height: 1.6;
+          margin-top: 1.2em;
+          margin-bottom: 1.2em;
+        }
+      `
+    )
+  })
+})

src/styles.js

@@ -10,2 +10,10 @@ const colors = require('tailwindcss/colors')
 const em = (px, base) => `${round(px / base)}em`
+const hexToRgb = (hex) => {
+  hex = hex.replace('#', '')
+  hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+  return `${r} ${g} ${b}`
+}
 
@@ -60,18 +68,21 @@ let defaultModifiers = {
         },
-        video: {
+        picture: {
           marginTop: em(24, 14),
           marginBottom: em(24, 14),
         },
-        figure: {
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        video: {
           marginTop: em(24, 14),
           marginBottom: em(24, 14),
         },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
+        kbd: {
           fontSize: em(12, 14),
-          lineHeight: round(16 / 12),
-          marginTop: em(8, 12),
+          borderRadius: rem(5),
+          paddingTop: em(2, 14),
+          paddingRight: em(5, 14),
+          paddingBottom: em(2, 14),
+          paddingLeft: em(5, 14),
         },
@@ -138,2 +149,13 @@ code: {
         },
+        dl: {
+          marginTop: em(16, 14),
+          marginBottom: em(16, 14),
+        },
+        dt: {
+          marginTop: em(16, 14),
+        },
+        dd: {
+          marginTop: em(4, 14),
+          paddingLeft: em(22, 14),
+        },
         hr: {
@@ -182,2 +204,15 @@ marginTop: em(40, 14),
         },
+        figure: {
+          marginTop: em(24, 14),
+          marginBottom: em(24, 14),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(12, 14),
+          lineHeight: round(16 / 12),
+          marginTop: em(8, 12),
+        },
       },
@@ -241,18 +276,21 @@ {
         },
-        video: {
+        picture: {
           marginTop: em(32, 16),
           marginBottom: em(32, 16),
         },
-        figure: {
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        video: {
           marginTop: em(32, 16),
           marginBottom: em(32, 16),
         },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
+        kbd: {
           fontSize: em(14, 16),
-          lineHeight: round(20 / 14),
-          marginTop: em(12, 14),
+          borderRadius: rem(5),
+          paddingTop: em(3, 16),
+          paddingRight: em(6, 16),
+          paddingBottom: em(3, 16),
+          paddingLeft: em(6, 16),
         },
@@ -319,2 +357,13 @@ code: {
         },
+        dl: {
+          marginTop: em(20, 16),
+          marginBottom: em(20, 16),
+        },
+        dt: {
+          marginTop: em(20, 16),
+        },
+        dd: {
+          marginTop: em(8, 16),
+          paddingLeft: em(26, 16),
+        },
         hr: {
@@ -363,2 +412,15 @@ marginTop: em(48, 16),
         },
+        figure: {
+          marginTop: em(32, 16),
+          marginBottom: em(32, 16),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(14, 16),
+          lineHeight: round(20 / 14),
+          marginTop: em(12, 14),
+        },
       },
@@ -422,18 +484,21 @@ {
         },
-        video: {
+        picture: {
           marginTop: em(32, 18),
           marginBottom: em(32, 18),
         },
-        figure: {
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        video: {
           marginTop: em(32, 18),
           marginBottom: em(32, 18),
         },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
+        kbd: {
           fontSize: em(16, 18),
-          lineHeight: round(24 / 16),
-          marginTop: em(16, 16),
+          borderRadius: rem(5),
+          paddingTop: em(4, 18),
+          paddingRight: em(8, 18),
+          paddingBottom: em(4, 18),
+          paddingLeft: em(8, 18),
         },
@@ -500,2 +565,13 @@ code: {
         },
+        dl: {
+          marginTop: em(24, 18),
+          marginBottom: em(24, 18),
+        },
+        dt: {
+          marginTop: em(24, 18),
+        },
+        dd: {
+          marginTop: em(12, 18),
+          paddingLeft: em(28, 18),
+        },
         hr: {
@@ -544,2 +620,15 @@ marginTop: em(56, 18),
         },
+        figure: {
+          marginTop: em(32, 18),
+          marginBottom: em(32, 18),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(16, 18),
+          lineHeight: round(24 / 16),
+          marginTop: em(16, 16),
+        },
       },
@@ -603,18 +692,21 @@ {
         },
-        video: {
+        picture: {
           marginTop: em(40, 20),
           marginBottom: em(40, 20),
         },
-        figure: {
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        video: {
           marginTop: em(40, 20),
           marginBottom: em(40, 20),
         },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
+        kbd: {
           fontSize: em(18, 20),
-          lineHeight: round(28 / 18),
-          marginTop: em(18, 18),
+          borderRadius: rem(5),
+          paddingTop: em(5, 20),
+          paddingRight: em(8, 20),
+          paddingBottom: em(5, 20),
+          paddingLeft: em(8, 20),
         },
@@ -681,2 +773,13 @@ code: {
         },
+        dl: {
+          marginTop: em(24, 20),
+          marginBottom: em(24, 20),
+        },
+        dt: {
+          marginTop: em(24, 20),
+        },
+        dd: {
+          marginTop: em(12, 20),
+          paddingLeft: em(32, 20),
+        },
         hr: {
@@ -725,2 +828,15 @@ marginTop: em(56, 20),
         },
+        figure: {
+          marginTop: em(40, 20),
+          marginBottom: em(40, 20),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(18, 20),
+          lineHeight: round(28 / 18),
+          marginTop: em(18, 18),
+        },
       },
@@ -784,18 +900,21 @@ {
         },
-        video: {
+        picture: {
           marginTop: em(48, 24),
           marginBottom: em(48, 24),
         },
-        figure: {
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        video: {
           marginTop: em(48, 24),
           marginBottom: em(48, 24),
         },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
+        kbd: {
           fontSize: em(20, 24),
-          lineHeight: round(32 / 20),
-          marginTop: em(20, 20),
+          borderRadius: rem(6),
+          paddingTop: em(6, 24),
+          paddingRight: em(8, 24),
+          paddingBottom: em(6, 24),
+          paddingLeft: em(8, 24),
         },
@@ -862,2 +981,13 @@ code: {
         },
+        dl: {
+          marginTop: em(32, 24),
+          marginBottom: em(32, 24),
+        },
+        dt: {
+          marginTop: em(32, 24),
+        },
+        dd: {
+          marginTop: em(12, 24),
+          paddingLeft: em(38, 24),
+        },
         hr: {
@@ -906,2 +1036,15 @@ marginTop: em(72, 24),
         },
+        figure: {
+          marginTop: em(48, 24),
+          marginBottom: em(48, 24),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(20, 24),
+          lineHeight: round(32 / 20),
+          marginTop: em(20, 20),
+        },
       },
@@ -919,24 +1062,2 @@ {
 
-  // Invert (for dark mode)
-  invert: {
-    css: {
-      '--tw-prose-body': 'var(--tw-prose-invert-body)',
-      '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
-      '--tw-prose-lead': 'var(--tw-prose-invert-lead)',
-      '--tw-prose-links': 'var(--tw-prose-invert-links)',
-      '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
-      '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
-      '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
-      '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
-      '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
-      '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
-      '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
-      '--tw-prose-code': 'var(--tw-prose-invert-code)',
-      '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
-      '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
-      '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
-      '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
-    },
-  },
-
   // Gray color themes
@@ -957,2 +1078,4 @@
       '--tw-prose-captions': colors.slate[500],
+      '--tw-prose-kbd': colors.slate[900],
+      '--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]),
       '--tw-prose-code': colors.slate[900],
@@ -974,2 +1097,4 @@ '--tw-prose-pre-code': colors.slate[200],
       '--tw-prose-invert-captions': colors.slate[400],
+      '--tw-prose-invert-kbd': colors.white,
+      '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
       '--tw-prose-invert-code': colors.white,
@@ -996,2 +1121,4 @@ '--tw-prose-invert-pre-code': colors.slate[300],
       '--tw-prose-captions': colors.gray[500],
+      '--tw-prose-kbd': colors.gray[900],
+      '--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]),
       '--tw-prose-code': colors.gray[900],
@@ -1013,2 +1140,4 @@ '--tw-prose-pre-code': colors.gray[200],
       '--tw-prose-invert-captions': colors.gray[400],
+      '--tw-prose-invert-kbd': colors.white,
+      '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
       '--tw-prose-invert-code': colors.white,
@@ -1035,2 +1164,4 @@ '--tw-prose-invert-pre-code': colors.gray[300],
       '--tw-prose-captions': colors.zinc[500],
+      '--tw-prose-kbd': colors.zinc[900],
+      '--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]),
       '--tw-prose-code': colors.zinc[900],
@@ -1052,2 +1183,4 @@ '--tw-prose-pre-code': colors.zinc[200],
       '--tw-prose-invert-captions': colors.zinc[400],
+      '--tw-prose-invert-kbd': colors.white,
+      '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
       '--tw-prose-invert-code': colors.white,
@@ -1074,2 +1207,4 @@ '--tw-prose-invert-pre-code': colors.zinc[300],
       '--tw-prose-captions': colors.neutral[500],
+      '--tw-prose-kbd': colors.neutral[900],
+      '--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]),
       '--tw-prose-code': colors.neutral[900],
@@ -1091,2 +1226,4 @@ '--tw-prose-pre-code': colors.neutral[200],
       '--tw-prose-invert-captions': colors.neutral[400],
+      '--tw-prose-invert-kbd': colors.white,
+      '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
       '--tw-prose-invert-code': colors.white,
@@ -1113,2 +1250,4 @@ '--tw-prose-invert-pre-code': colors.neutral[300],
       '--tw-prose-captions': colors.stone[500],
+      '--tw-prose-kbd': colors.stone[900],
+      '--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]),
       '--tw-prose-code': colors.stone[900],
@@ -1130,2 +1269,4 @@ '--tw-prose-pre-code': colors.stone[200],
       '--tw-prose-invert-captions': colors.stone[400],
+      '--tw-prose-invert-kbd': colors.white,
+      '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white),
       '--tw-prose-invert-code': colors.white,
@@ -1259,2 +1400,26 @@ '--tw-prose-invert-pre-code': colors.stone[300],
   },
+
+  // Invert (for dark mode)
+  invert: {
+    css: {
+      '--tw-prose-body': 'var(--tw-prose-invert-body)',
+      '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
+      '--tw-prose-lead': 'var(--tw-prose-invert-lead)',
+      '--tw-prose-links': 'var(--tw-prose-invert-links)',
+      '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
+      '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
+      '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
+      '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
+      '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
+      '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
+      '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
+      '--tw-prose-kbd': 'var(--tw-prose-invert-kbd)',
+      '--tw-prose-kbd-shadows': 'var(--tw-prose-invert-kbd-shadows)',
+      '--tw-prose-code': 'var(--tw-prose-invert-code)',
+      '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
+      '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
+      '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
+      '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
+    },
+  },
 }
@@ -1268,2 +1433,3 @@
         maxWidth: '65ch',
+        p: {}, // Required to maintain correct order when merging
         '[class~="lead"]': {
@@ -1330,2 +1496,6 @@ color: 'var(--tw-prose-lead)',
         },
+        dt: {
+          color: 'var(--tw-prose-headings)',
+          fontWeight: '600',
+        },
         hr: {
@@ -1381,8 +1551,13 @@ borderColor: 'var(--tw-prose-hr)',
         },
-        // TODO: Figure out how to not need these, it's a merging issue
-        img: {},
-        'figure > *': {},
-        figcaption: {
-          color: 'var(--tw-prose-captions)',
+        img: {}, // Required to maintain correct order when merging
+        picture: {
+          display: 'block',
         },
+        kbd: {
+          fontWeight: '500',
+          fontFamily: 'inherit',
+          color: 'var(--tw-prose-kbd)',
+          boxShadow:
+            '0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)',
+        },
         code: {
@@ -1475,2 +1650,6 @@ color: 'var(--tw-prose-code)',
         },
+        'figure > *': {}, // Required to maintain correct order when merging
+        figcaption: {
+          color: 'var(--tw-prose-captions)',
+        },
       },
@@ -1477,0 +1656,0 @@ defaultModifiers.gray.css,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104191

increased by11.76%

Lines of code

3144

increased by10.32%

Number of lines in readme file

28

increased by3.7%

No dependency changes