♻️ Adopt new Tailwind typography theming

assets/css/compiled/main.css

@@ -468,12 +468,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-backdrop-sepia:  ;
 }
 
-.prose {
+.markdown {
-  color: rgb(var(--color-neutral-700));
+  color: var(--tw-prose-body);
   max-width: 65ch;
 }
 
-.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+.markdown :where([class~="lead"]):not(:where([class~="not-markdown"] *)) {
   color: var(--tw-prose-lead);
   font-size: 1.25em;
   line-height: 1.6;
@@ -481,111 +481,110 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1.2em;
 }
 
-.prose a {
+.markdown a {
-  color: rgb(var(--color-primary-700));
+  color: var(--tw-prose-links);
   text-decoration: underline;
   font-weight: 500;
   -webkit-text-decoration-color: rgb(var(--color-primary-300));
           text-decoration-color: rgb(var(--color-primary-300));
 }
 
-:where(.prose a:hover):not(:where([class~="not-prose"] *)) {
+:where(.markdown a:hover):not(:where([class~="not-markdown"] *)) {
   color: rgb(var(--color-neutral)) !important;
   text-decoration: none !important;
   background-color: rgb(var(--color-primary-600)) !important;
   border-radius: 0.09rem;
 }
 
-.prose :where(strong):not(:where([class~="not-prose"] *)) {
+.markdown :where(strong):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-900));
+  color: var(--tw-prose-bold);
   font-weight: 600;
 }
 
-.prose :where(ol):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol):not(:where([class~="not-markdown"] *)) {
   list-style-type: decimal;
   padding-left: 1.625em;
 }
 
-.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="A"]):not(:where([class~="not-markdown"] *)) {
   list-style-type: upper-alpha;
 }
 
-.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="a"]):not(:where([class~="not-markdown"] *)) {
   list-style-type: lower-alpha;
 }
 
-.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="A" s]):not(:where([class~="not-markdown"] *)) {
   list-style-type: upper-alpha;
 }
 
-.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="a" s]):not(:where([class~="not-markdown"] *)) {
   list-style-type: lower-alpha;
 }
 
-.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="I"]):not(:where([class~="not-markdown"] *)) {
   list-style-type: upper-roman;
 }
 
-.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="i"]):not(:where([class~="not-markdown"] *)) {
   list-style-type: lower-roman;
 }
 
-.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="I" s]):not(:where([class~="not-markdown"] *)) {
   list-style-type: upper-roman;
 }
 
-.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="i" s]):not(:where([class~="not-markdown"] *)) {
   list-style-type: lower-roman;
 }
 
-.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol[type="1"]):not(:where([class~="not-markdown"] *)) {
   list-style-type: decimal;
 }
 
-.prose :where(ul):not(:where([class~="not-prose"] *)) {
+.markdown :where(ul):not(:where([class~="not-markdown"] *)) {
   list-style-type: disc;
   padding-left: 1.625em;
 }
 
-.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
+.markdown :where(ol > li):not(:where([class~="not-markdown"] *))::marker {
   font-weight: 400;
   color: var(--tw-prose-counters);
 }
 
-.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
+.markdown :where(ul > li):not(:where([class~="not-markdown"] *))::marker {
   color: var(--tw-prose-bullets);
 }
 
-.prose :where(hr):not(:where([class~="not-prose"] *)) {
+.markdown :where(hr):not(:where([class~="not-markdown"] *)) {
-  border-color: rgb(var(--color-neutral-200));
+  border-color: var(--tw-prose-hr);
   border-top-width: 1px;
   margin-top: 3em;
   margin-bottom: 3em;
 }
 
-.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+.markdown :where(blockquote):not(:where([class~="not-markdown"] *)) {
   font-weight: 500;
   font-style: italic;
-  color: rgb(var(--color-neutral-800));
+  color: var(--tw-prose-quotes);
   border-left-width: 0.25rem;
-  border-left-color: rgb(var(--color-primary-200));
+  border-left-color: var(--tw-prose-quote-borders);
   quotes: "\201C""\201D""\2018""\2019";
   margin-top: 1.6em;
   margin-bottom: 1.6em;
   padding-left: 1em;
-  border-right-color: rgb(var(--color-primary-200));
 }
 
-.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
+.markdown :where(blockquote p:first-of-type):not(:where([class~="not-markdown"] *))::before {
   content: open-quote;
 }
 
-.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
+.markdown :where(blockquote p:last-of-type):not(:where([class~="not-markdown"] *))::after {
   content: close-quote;
 }
 
-.prose :where(h1):not(:where([class~="not-prose"] *)) {
+.markdown :where(h1):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-900));
+  color: var(--tw-prose-headings);
   font-weight: 800;
   font-size: 2.25em;
   margin-top: 0;
@@ -594,12 +593,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
-.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+.markdown :where(h1 strong):not(:where([class~="not-markdown"] *)) {
   font-weight: 900;
 }
 
-.prose :where(h2):not(:where([class~="not-prose"] *)) {
+.markdown :where(h2):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-800));
+  color: var(--tw-prose-headings);
   font-weight: 700;
   font-size: 1.5em;
   margin-top: 2em;
@@ -608,12 +607,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
-.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+.markdown :where(h2 strong):not(:where([class~="not-markdown"] *)) {
   font-weight: 800;
 }
 
-.prose :where(h3):not(:where([class~="not-prose"] *)) {
+.markdown :where(h3):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-800));
+  color: var(--tw-prose-headings);
   font-weight: 600;
   font-size: 1.25em;
   margin-top: 1.6em;
@@ -622,12 +621,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
-.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+.markdown :where(h3 strong):not(:where([class~="not-markdown"] *)) {
   font-weight: 700;
 }
 
-.prose :where(h4):not(:where([class~="not-prose"] *)) {
+.markdown :where(h4):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-800));
+  color: var(--tw-prose-headings);
   font-weight: 600;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
@@ -635,43 +634,43 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
-.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+.markdown :where(h4 strong):not(:where([class~="not-markdown"] *)) {
   font-weight: 700;
 }
 
-.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
+.markdown :where(figure > *):not(:where([class~="not-markdown"] *)) {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
+.markdown :where(figcaption):not(:where([class~="not-markdown"] *)) {
   color: var(--tw-prose-captions);
   font-size: 0.875em;
   line-height: 1.4285714;
   margin-top: 0.8571429em;
 }
 
-.prose :where(code):not(:where([class~="not-prose"] *)) {
+.markdown :where(code):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-secondary-700));
+  color: var(--tw-prose-code);
   font-weight: 600;
   font-size: 0.875em;
 }
 
-.prose :where(code):not(:where([class~="not-prose"] *))::before {
+.markdown :where(code):not(:where([class~="not-markdown"] *))::before {
   content: "`";
 }
 
-.prose :where(code):not(:where([class~="not-prose"] *))::after {
+.markdown :where(code):not(:where([class~="not-markdown"] *))::after {
   content: "`";
 }
 
-.prose :where(a code):not(:where([class~="not-prose"] *)) {
+.markdown :where(a code):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-secondary-700));
+  color: var(--tw-prose-code);
 }
 
-.prose :where(pre):not(:where([class~="not-prose"] *)) {
+.markdown :where(pre):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-700));
+  color: var(--tw-prose-pre-code);
-  background-color: rgb(var(--color-neutral-50));
+  background-color: var(--tw-prose-pre-bg);
   overflow-x: auto;
   font-weight: 400;
   font-size: 0.875em;
@@ -685,27 +684,27 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 1.1428571em;
 }
 
-.prose :where(pre code):not(:where([class~="not-prose"] *)) {
+.markdown :where(pre code):not(:where([class~="not-markdown"] *)) {
   background-color: transparent;
   border-width: 0;
   border-radius: 0;
   padding: 0;
   font-weight: inherit;
-  color: rgb(var(--color-neutral-700));
+  color: inherit;
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
 }
 
-.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
+.markdown :where(pre code):not(:where([class~="not-markdown"] *))::before {
   content: none;
 }
 
-.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
+.markdown :where(pre code):not(:where([class~="not-markdown"] *))::after {
   content: none;
 }
 
-.prose :where(table):not(:where([class~="not-prose"] *)) {
+.markdown :where(table):not(:where([class~="not-markdown"] *)) {
   width: 100%;
   table-layout: auto;
   text-align: left;
@@ -715,13 +714,13 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.7142857;
 }
 
-.prose :where(thead):not(:where([class~="not-prose"] *)) {
+.markdown :where(thead):not(:where([class~="not-markdown"] *)) {
   border-bottom-width: 1px;
   border-bottom-color: var(--tw-prose-th-borders);
 }
 
-.prose :where(thead th):not(:where([class~="not-prose"] *)) {
+.markdown :where(thead th):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-800));
+  color: var(--tw-prose-headings);
   font-weight: 600;
   vertical-align: bottom;
   padding-right: 0.5714286em;
@@ -729,16 +728,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 0.5714286em;
 }
 
-.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
+.markdown :where(tbody tr):not(:where([class~="not-markdown"] *)) {
   border-bottom-width: 1px;
-  border-bottom-color: rgb(var(--color-neutral-300));
+  border-bottom-color: var(--tw-prose-td-borders);
 }
 
-.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
+.markdown :where(tbody tr:last-child):not(:where([class~="not-markdown"] *)) {
   border-bottom-width: 0;
 }
 
-.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
+.markdown :where(tbody td):not(:where([class~="not-markdown"] *)) {
   vertical-align: baseline;
   padding-top: 0.5714286em;
   padding-right: 0.5714286em;
@@ -746,163 +745,151 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 0.5714286em;
 }
 
-.prose {
+.markdown {
-  --tw-prose-body: #374151;
+  --tw-prose-body: rgb(var(--color-neutral-700));
-  --tw-prose-headings: #111827;
+  --tw-prose-headings: rgb(var(--color-neutral-800));
-  --tw-prose-lead: #4b5563;
+  --tw-prose-lead: rgb(var(--color-neutral-500));
-  --tw-prose-links: #111827;
+  --tw-prose-links: rgb(var(--color-primary-700));
-  --tw-prose-bold: #111827;
+  --tw-prose-bold: rgb(var(--color-neutral-900));
-  --tw-prose-counters: #6b7280;
+  --tw-prose-counters: rgb(var(--color-neutral-800));
-  --tw-prose-bullets: #d1d5db;
+  --tw-prose-bullets: rgb(var(--color-neutral-500));
-  --tw-prose-hr: #e5e7eb;
+  --tw-prose-hr: rgb(var(--color-neutral-200));
-  --tw-prose-quotes: #111827;
+  --tw-prose-quotes: rgb(var(--color-neutral-700));
-  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-quote-borders: rgb(var(--color-primary-200));
-  --tw-prose-captions: #6b7280;
+  --tw-prose-captions: rgb(var(--color-neutral-500));
-  --tw-prose-code: #111827;
+  --tw-prose-code: rgb(var(--color-secondary-700));
-  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-code: rgb(var(--color-neutral-700));
-  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-pre-bg: rgb(var(--color-neutral-50));
-  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-th-borders: rgb(var(--color-neutral-500));
-  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-td-borders: rgb(var(--color-neutral-300));
-  --tw-prose-invert-body: #d1d5db;
+  --tw-prose-invert-body: rgb(var(--color-neutral-300));
-  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-headings: rgb(var(--color-neutral-50));
-  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-lead: rgb(var(--color-neutral-500));
-  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-links: rgb(var(--color-primary-400));
-  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-bold: rgb(var(--color-neutral));
-  --tw-prose-invert-counters: #9ca3af;
+  --tw-prose-invert-counters: rgb(var(--color-neutral-400));
-  --tw-prose-invert-bullets: #4b5563;
+  --tw-prose-invert-bullets: rgb(var(--color-neutral-600));
-  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-hr: rgb(var(--color-neutral-500));
-  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quotes: rgb(var(--color-neutral-200));
-  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-quote-borders: rgb(var(--color-primary-900));
-  --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-captions: rgb(var(--color-neutral-400));
-  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-code: rgb(var(--color-secondary-400));
-  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-code: rgb(var(--color-neutral-200));
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-pre-bg: rgb(var(--color-neutral-700));
-  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-th-borders: rgb(var(--color-neutral-500));
-  --tw-prose-invert-td-borders: #374151;
+  --tw-prose-invert-td-borders: rgb(var(--color-neutral-700));
   font-size: 1rem;
   line-height: 1.75;
 }
 
-.prose :where(p):not(:where([class~="not-prose"] *)) {
+.markdown :where(p):not(:where([class~="not-markdown"] *)) {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
 }
 
-.prose :where(img):not(:where([class~="not-prose"] *)) {
+.markdown :where(img):not(:where([class~="not-markdown"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.prose :where(video):not(:where([class~="not-prose"] *)) {
+.markdown :where(video):not(:where([class~="not-markdown"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.prose :where(figure):not(:where([class~="not-prose"] *)) {
+.markdown :where(figure):not(:where([class~="not-markdown"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+.markdown :where(h2 code):not(:where([class~="not-markdown"] *)) {
   font-size: 0.875em;
 }
 
-.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+.markdown :where(h3 code):not(:where([class~="not-markdown"] *)) {
   font-size: 0.9em;
 }
 
-.prose :where(li):not(:where([class~="not-prose"] *)) {
+.markdown :where(li):not(:where([class~="not-markdown"] *)) {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
-.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
+.markdown :where(ol > li):not(:where([class~="not-markdown"] *)) {
   padding-left: 0.375em;
 }
 
-.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
+.markdown :where(ul > li):not(:where([class~="not-markdown"] *)) {
   padding-left: 0.375em;
 }
 
-.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.markdown > :where(ul > li p):not(:where([class~="not-markdown"] *)) {
   margin-top: 0.75em;
   margin-bottom: 0.75em;
 }
 
-.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
+.markdown > :where(ul > li > *:first-child):not(:where([class~="not-markdown"] *)) {
   margin-top: 1.25em;
 }
 
-.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
+.markdown > :where(ul > li > *:last-child):not(:where([class~="not-markdown"] *)) {
   margin-bottom: 1.25em;
 }
 
-.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
+.markdown > :where(ol > li > *:first-child):not(:where([class~="not-markdown"] *)) {
   margin-top: 1.25em;
 }
 
-.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
+.markdown > :where(ol > li > *:last-child):not(:where([class~="not-markdown"] *)) {
   margin-bottom: 1.25em;
 }
 
-.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+.markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-markdown"] *)) {
   margin-top: 0.75em;
   margin-bottom: 0.75em;
 }
 
-.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
+.markdown :where(hr + *):not(:where([class~="not-markdown"] *)) {
   margin-top: 0;
 }
 
-.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
+.markdown :where(h2 + *):not(:where([class~="not-markdown"] *)) {
   margin-top: 0;
 }
 
-.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
+.markdown :where(h3 + *):not(:where([class~="not-markdown"] *)) {
   margin-top: 0;
 }
 
-.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
+.markdown :where(h4 + *):not(:where([class~="not-markdown"] *)) {
   margin-top: 0;
 }
 
-.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+.markdown :where(thead th:first-child):not(:where([class~="not-markdown"] *)) {
   padding-left: 0;
 }
 
-.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+.markdown :where(thead th:last-child):not(:where([class~="not-markdown"] *)) {
   padding-right: 0;
 }
 
-.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.markdown :where(tbody td:first-child):not(:where([class~="not-markdown"] *)) {
   padding-left: 0;
 }
 
-.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.markdown :where(tbody td:last-child):not(:where([class~="not-markdown"] *)) {
   padding-right: 0;
 }
 
-.prose > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.markdown > :where(:first-child):not(:where([class~="not-markdown"] *)) {
   margin-top: 0;
 }
 
-.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.markdown > :where(:last-child):not(:where([class~="not-markdown"] *)) {
   margin-bottom: 0;
 }
 
-.prose :where(ol > li):not(:where([class~="not-prose"] *))::before {
+.markdown :where(kbd):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-800));
-}
-
-.prose :where(ul > li):not(:where([class~="not-prose"] *))::before {
-  background-color: rgb(var(--color-neutral-500));
-}
-
-.prose :where(thead tr):not(:where([class~="not-prose"] *)) {
-  border-bottom-color: rgb(var(--color-neutral-500));
-}
-
-.prose :where(kbd):not(:where([class~="not-prose"] *)) {
   background-color: rgb(var(--color-neutral-200));
   padding: 0.1rem 0.4rem;
   border-radius: 0.25rem;
@@ -910,7 +897,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-weight: 600;
 }
 
-.prose :where(mark):not(:where([class~="not-prose"] *)) {
+.markdown :where(mark):not(:where([class~="not-markdown"] *)) {
+  color: rgb(var(--color-neutral-800));
   background-color: rgb(var(--color-secondary-200));
   padding: 0.1rem 0.2rem;
   border-radius: 0.12rem;
@@ -939,7 +927,7 @@ body a, body button {
 
 /* Heading anchors */
 
-.prose .heading-anchor:hover {
+.markdown .heading-anchor:hover {
   background-color: transparent !important;
   --tw-text-opacity: 1 !important;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity)) !important;
@@ -947,7 +935,7 @@ body a, body button {
           text-decoration-line: underline !important;
 }
 
-.prose .heading-anchor:hover, .prose .heading-anchor:focus, .prose h2:hover > .heading-anchor, .prose h3:hover > .heading-anchor, .prose h4:hover > .heading-anchor {
+.markdown .heading-anchor:hover, .markdown .heading-anchor:focus, .markdown h2:hover > .heading-anchor, .markdown h3:hover > .heading-anchor, .markdown h4:hover > .heading-anchor {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-200), var(--tw-text-opacity));
   -webkit-text-decoration-line: none;
@@ -955,6 +943,11 @@ body a, body button {
   opacity: 1;
 }
 
+.dark .markdown .heading-anchor:hover, .dark .markdown .heading-anchor:focus, .dark .markdown h2:hover > .heading-anchor, .dark .markdown h3:hover > .heading-anchor, .dark .markdown h4:hover > .heading-anchor {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
 /* Article pagination */
 
 .article-pagination a:hover .article-pagination-title {
@@ -976,28 +969,28 @@ body a, body button {
 
 /* RTL support */
 
-[dir="rtl"] .prose blockquote {
+[dir="rtl"] .markdown blockquote {
   border-left-width: 0px;
   border-right-width: 4px;
   padding-right: 1rem;
 }
 
-[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li {
+[dir="rtl"] .markdown ul > li, [dir="rtl"] .markdown ol > li {
   margin-right: 1.75rem;
   padding-left: 0px;
   padding-right: 0.5rem;
 }
 
-[dir="rtl"] .prose ol > li:before, [dir="rtl"] .prose ul > li:before {
+[dir="rtl"] .markdown ol > li:before, [dir="rtl"] .markdown ul > li:before {
   left: auto;
   right: 0.25rem;
 }
 
-[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child {
+[dir="rtl"] .markdown thead td:first-child, [dir="rtl"] .markdown thead th:first-child {
   padding-right: 0px;
 }
 
-[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child {
+[dir="rtl"] .markdown thead td:last-child, [dir="rtl"] .markdown thead th:last-child {
   padding-left: 0px;
 }
 
@@ -1005,7 +998,7 @@ body a, body button {
 
 /* Background */
 
-.prose .chroma {
+.markdown .chroma {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
@@ -1013,7 +1006,7 @@ body a, body button {
   color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
 }
 
-.dark .prose .chroma {
+.dark .markdown .chroma {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity));
   --tw-text-opacity: 1;
@@ -1619,8 +1612,8 @@ body a, body button {
   width: 2rem;
 }
 
-.w-5 {
+.w-6 {
-  width: 1.25rem;
+  width: 1.5rem;
 }
 
 .min-w-\[1\.8rem\] {
@@ -2300,98 +2293,36 @@ body a, body button {
   text-align: left;
 }
 
-.dark .dark\:prose-light {
+.dark .dark\:markdown-invert {
-  color: rgb(var(--color-neutral-300));
+  --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);
 }
 
-.dark .dark\:prose-light a {
+.dark .dark\:markdown-invert :where(a):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-primary-400));
+  -webkit-text-decoration-color: rgb(var(--color-neutral-600));
-  -webkit-text-decoration-color: rgb(var(--color-neutral-500));
+          text-decoration-color: rgb(var(--color-neutral-600));
-          text-decoration-color: rgb(var(--color-neutral-500));
 }
 
-:where(.dark .dark\:prose-light a:hover):not(:where([class~="not-prose"] *)) {
+.dark .dark\:markdown-invert :where(kbd):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral)) !important;
-  text-decoration: none !important;
-}
-
-.dark .dark\:prose-light :where(strong):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral));
-}
-
-.dark .dark\:prose-light :where(ol > li):not(:where([class~="not-prose"] *))::before {
-  color: rgb(var(--color-neutral-400));
-}
-
-.dark .dark\:prose-light :where(ul > li):not(:where([class~="not-prose"] *))::before {
-  background-color: rgb(var(--color-neutral-600));
-}
-
-.dark .dark\:prose-light :where(hr):not(:where([class~="not-prose"] *)) {
-  border-color: rgb(var(--color-neutral-500));
-}
-
-.dark .dark\:prose-light :where(blockquote):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-200));
-  border-left-color: rgb(var(--color-primary-900));
-  border-right-color: rgb(var(--color-primary-900));
-}
-
-.dark .dark\:prose-light :where(h1):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral));
-}
-
-.dark .dark\:prose-light :where(h2):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-50));
-}
-
-.dark .dark\:prose-light :where(h3):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-50));
-}
-
-.dark .dark\:prose-light :where(h4):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-50));
-}
-
-.dark .dark\:prose-light :where(figure figcaption):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-400));
-}
-
-.dark .dark\:prose-light :where(code):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-secondary-400));
-}
-
-.dark .dark\:prose-light :where(a code):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-secondary-400));
-}
-
-.dark .dark\:prose-light :where(pre):not(:where([class~="not-prose"] *)) {
   color: rgb(var(--color-neutral-200));
   background-color: rgb(var(--color-neutral-700));
 }
 
-.dark .dark\:prose-light :where(pre code):not(:where([class~="not-prose"] *)) {
+.dark .dark\:markdown-invert :where(mark):not(:where([class~="not-markdown"] *)) {
-  color: rgb(var(--color-neutral-200));
-}
-
-.dark .dark\:prose-light :where(thead th):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral));
-}
-
-.dark .dark\:prose-light :where(thead tr):not(:where([class~="not-prose"] *)) {
-  border-bottom-color: rgb(var(--color-neutral-500));
-}
-
-.dark .dark\:prose-light :where(tbody tr):not(:where([class~="not-prose"] *)) {
-  border-bottom-color: rgb(var(--color-neutral-700));
-}
-
-.dark .dark\:prose-light :where(kbd):not(:where([class~="not-prose"] *)) {
-  background-color: rgb(var(--color-neutral-700));
-  color: rgb(var(--color-neutral-300));
-}
-
-.dark .dark\:prose-light :where(mark):not(:where([class~="not-prose"] *)) {
   background-color: rgb(var(--color-secondary-400));
 }
 

assets/css/main.css

@@ -22,15 +22,15 @@ body button {
 }
 
 /* Heading anchors */
-.prose .heading-anchor:hover {
+.markdown .heading-anchor:hover {
   @apply underline bg-transparent text-primary-500 !important;
 }
-.prose .heading-anchor:hover,
+.markdown .heading-anchor:hover,
-.prose .heading-anchor:focus,
+.markdown .heading-anchor:focus,
-.prose h2:hover > .heading-anchor,
+.markdown h2:hover > .heading-anchor,
-.prose h3:hover > .heading-anchor,
+.markdown h3:hover > .heading-anchor,
-.prose h4:hover > .heading-anchor {
+.markdown h4:hover > .heading-anchor {
-  @apply no-underline opacity-100 text-primary-200;
+  @apply no-underline opacity-100 text-primary-200 dark:text-neutral-700;
 }
 
 /* Article pagination */
@@ -42,29 +42,29 @@ body button {
 }
 
 /* RTL support */
-.prose blockquote {
+.markdown blockquote {
   @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
 }
-.prose ul > li,
+.markdown ul > li,
-.prose ol > li {
+.markdown ol > li {
   @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
 }
-.prose ol > li:before,
+.markdown ol > li:before,
-.prose ul > li:before {
+.markdown ul > li:before {
   @apply rtl:left-auto rtl:right-1;
 }
-.prose thead td:first-child,
+.markdown thead td:first-child,
-.prose thead th:first-child {
+.markdown thead th:first-child {
   @apply rtl:pr-0;
 }
-.prose thead td:last-child,
+.markdown thead td:last-child,
-.prose thead th:last-child {
+.markdown thead th:last-child {
   @apply rtl:pl-0;
 }
 
 /* -- Chroma Highlight -- */
 /* Background */
-.prose .chroma {
+.markdown .chroma {
   @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
 }
 /* LineTableTD */

exampleSite/content/_index.md

@@ -12,7 +12,7 @@ A simple, lightweight theme for Hugo built with Tailwind CSS.
     {{< icon "exclamation-triangle" >}}
   </span>
   <span class="flex items-center justify-between grow dark:text-neutral-300">
-    <span class="prose dark:text-neutral">This is a demo of the <code id="layout">page</code> layout.</span>
+    <span class="markdown dark:markdown-invert">This is a demo of the <code id="layout">page</code> layout.</span>
     <button
       class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
       onclick="switchLayout()"

exampleSite/content/samples/markdown.md

@@ -45,7 +45,7 @@ The blockquote element represents content that is quoted from another source, op
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
 
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+[^1]: The above quote is excerpted from Rob Pike's [talk `about` nothing](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
 
 ## Tables
 

layouts/404.html

@@ -3,7 +3,7 @@
   <p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
     {{ i18n "error.404_error" | emojify }}
   </p>
-  <div class="prose dark:prose-light">
+  <div class="markdown dark:markdown-invert">
     <p>{{ i18n "error.404_description" | emojify }}</p>
   </div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -1 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-5 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-6 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>

layouts/_default/list.html

@@ -16,7 +16,7 @@
     </section>
     {{ partial "pagination.html" . }}
   {{ else }}
-    <section class="mt-10 prose dark:prose-light">
+    <section class="mt-10 markdown dark:markdown-invert">
       <p class="py-8 border-t">
         <em>{{ i18n "list.no_articles" | emojify }}</em>
       </p>

layouts/_default/single.html

@@ -11,7 +11,7 @@
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
     </header>
-    <section class="prose dark:prose-light">
+    <section class="markdown dark:markdown-invert">
       {{ .Content | emojify }}
     </section>
     <footer class="pt-8">

layouts/partials/article-link.html

@@ -34,7 +34,7 @@
     {{ partial "article-meta.html" . }}
   </div>
   {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-    <div class="py-1 prose dark:prose-light">
+    <div class="py-1 markdown dark:markdown-invert">
       {{ .Summary | emojify }}
     </div>
   {{ end }}

layouts/partials/home/page.html

@@ -1,4 +1,4 @@
-<article class="max-w-full prose dark:prose-light">
+<article class="max-w-full markdown dark:markdown-invert">
   {{ with .Title }}
     <header>
       <h1>{{ . | emojify }}</h1>

layouts/partials/home/profile.html

@@ -29,7 +29,7 @@
       {{ partialCached "author-links.html" . }}
     </div>
   </header>
-  <section class="prose dark:prose-light">{{ .Content | emojify }}</section>
+  <section class="markdown dark:markdown-invert">{{ .Content | emojify }}</section>
 </article>
 <section>
   {{ partial "recent-articles.html" . }}

layouts/partials/section-header.html

@@ -2,7 +2,7 @@
   {{ if .Site.Params.list.showBreadcrumbs | default false }}
     {{ partial "breadcrumbs.html" . }}
   {{ end }}
-  <section class="prose dark:prose-light">
+  <section class="markdown dark:markdown-invert">
     <h1 class="mb-3 text-4xl font-extrabold text-neutral-800">{{ .Title }}</h1>
     <section>{{ .Content }}</section>
   </section>

layouts/shortcodes/alert.html

@@ -2,7 +2,7 @@
   <span class="ltr:pr-3 rtl:pl-3 text-primary-400">
     {{ partial "icon.html" "exclamation-triangle" }}
   </span>
-  <span class="not-prose dark:text-neutral-300">
+  <span class="not-markdown dark:text-neutral-300">
     {{- .Inner | markdownify -}}
   </span>
 </div>

tailwind.config.js

@@ -20,7 +20,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        transparent: "transparent",
         neutral: {
           DEFAULT: varWithOpacity("--color-neutral"),
           50: varWithOpacity("--color-neutral-50"),
@@ -61,11 +60,40 @@ module.exports = {
       },
       typography: (theme) => ({
         DEFAULT: {
-          css: [
+          css: {
-            {
+            "--tw-prose-body": theme("colors.neutral.700"),
-              color: theme("colors.neutral.700"),
+            "--tw-prose-headings": theme("colors.neutral.800"),
+            "--tw-prose-lead": theme("colors.neutral.500"),
+            "--tw-prose-links": theme("colors.primary.700"),
+            "--tw-prose-bold": theme("colors.neutral.900"),
+            "--tw-prose-counters": theme("colors.neutral.800"),
+            "--tw-prose-bullets": theme("colors.neutral.500"),
+            "--tw-prose-hr": theme("colors.neutral.200"),
+            "--tw-prose-quotes": theme("colors.neutral.700"),
+            "--tw-prose-quote-borders": theme("colors.primary.200"),
+            "--tw-prose-captions": theme("colors.neutral.500"),
+            "--tw-prose-code": theme("colors.secondary.700"),
+            "--tw-prose-pre-code": theme("colors.neutral.700"),
+            "--tw-prose-pre-bg": theme("colors.neutral.50"),
+            "--tw-prose-th-borders": theme("colors.neutral.500"),
+            "--tw-prose-td-borders": theme("colors.neutral.300"),
+            "--tw-prose-invert-body": theme("colors.neutral.300"),
+            "--tw-prose-invert-headings": theme("colors.neutral.50"),
+            "--tw-prose-invert-lead": theme("colors.neutral.500"),
+            "--tw-prose-invert-links": theme("colors.primary.400"),
+            "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT"),
+            "--tw-prose-invert-counters": theme("colors.neutral.400"),
+            "--tw-prose-invert-bullets": theme("colors.neutral.600"),
+            "--tw-prose-invert-hr": theme("colors.neutral.500"),
+            "--tw-prose-invert-quotes": theme("colors.neutral.200"),
+            "--tw-prose-invert-quote-borders": theme("colors.primary.900"),
+            "--tw-prose-invert-captions": theme("colors.neutral.400"),
+            "--tw-prose-invert-code": theme("colors.secondary.400"),
+            "--tw-prose-invert-pre-code": theme("colors.neutral.200"),
+            "--tw-prose-invert-pre-bg": theme("colors.neutral.700"),
+            "--tw-prose-invert-th-borders": theme("colors.neutral.500"),
+            "--tw-prose-invert-td-borders": theme("colors.neutral.700"),
             a: {
-                color: theme("colors.primary.700"),
               textDecoration: "underline",
               textDecorationColor: theme("colors.primary.300"),
               fontWeight: "500",
@@ -76,64 +104,21 @@ module.exports = {
                 borderRadius: "0.09rem",
               },
             },
-              strong: {
+            "a code": {
-                color: theme("colors.neutral.900"),
+              color: "var(--tw-prose-code)",
-              },
-              "ol > li::before": {
-                color: theme("colors.neutral.800"),
-              },
-              "ul > li::before": {
-                backgroundColor: theme("colors.neutral.500"),
-              },
-              hr: {
-                borderColor: theme("colors.neutral.200"),
-              },
-              blockquote: {
-                color: theme("colors.neutral.800"),
-                borderLeftColor: theme("colors.primary.200"),
-                borderRightColor: theme("colors.primary.200"),
             },
             h1: {
-                color: theme("colors.neutral.900"),
               position: "relative",
             },
             h2: {
-                color: theme("colors.neutral.800"),
               position: "relative",
             },
             h3: {
-                color: theme("colors.neutral.800"),
               position: "relative",
             },
             h4: {
-                color: theme("colors.neutral.800"),
               position: "relative",
             },
-              code: {
-                color: theme("colors.secondary.700"),
-              },
-              "a code": {
-                color: theme("colors.secondary.700"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.700"),
-              },
-              pre: {
-                color: theme("colors.neutral.700"),
-                backgroundColor: theme("colors.neutral.50"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.700"),
-              },
-              "thead th": {
-                color: theme("colors.neutral.800"),
-              },
-              "thead tr": {
-                borderBottomColor: theme("colors.neutral.500"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.neutral.300"),
-              },
             kbd: {
               backgroundColor: theme("colors.neutral.200"),
               padding: "0.1rem 0.4rem",
@@ -142,91 +127,33 @@ module.exports = {
               fontWeight: "600",
             },
             mark: {
+              color: theme("colors.neutral.800"),
               backgroundColor: theme("colors.secondary.200"),
               padding: "0.1rem 0.2rem",
               borderRadius: "0.12rem",
             },
           },
-          ],
         },
-        light: {
+        invert: {
-          css: [
+          css: {
-            {
-              color: theme("colors.neutral.300"),
             a: {
-                color: theme("colors.primary.400"),
+              textDecorationColor: theme("colors.neutral.600"),
-                textDecorationColor: theme("colors.neutral.500"),
-                "&:hover": {
-                  color: `${theme("colors.neutral.DEFAULT")} !important`,
-                  textDecoration: "none !important",
-                },
-              },
-              strong: {
-                color: theme("colors.neutral.DEFAULT"),
-              },
-              "ol > li::before": {
-                color: theme("colors.neutral.400"),
-              },
-              "ul > li::before": {
-                backgroundColor: theme("colors.neutral.600"),
-              },
-              hr: {
-                borderColor: theme("colors.neutral.500"),
-              },
-              blockquote: {
-                color: theme("colors.neutral.200"),
-                borderLeftColor: theme("colors.primary.900"),
-                borderRightColor: theme("colors.primary.900"),
-              },
-              h1: {
-                color: theme("colors.neutral.DEFAULT"),
-              },
-              h2: {
-                color: theme("colors.neutral.50"),
-              },
-              h3: {
-                color: theme("colors.neutral.50"),
-              },
-              h4: {
-                color: theme("colors.neutral.50"),
-              },
-              "figure figcaption": {
-                color: theme("colors.neutral.400"),
-              },
-              code: {
-                color: theme("colors.secondary.400"),
-              },
-              "a code": {
-                color: theme("colors.secondary.400"),
-              },
-              pre: {
-                color: theme("colors.neutral.200"),
-                backgroundColor: theme("colors.neutral.700"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.200"),
-              },
-              "thead th": {
-                color: theme("colors.neutral.DEFAULT"),
-              },
-              "thead tr": {
-                borderBottomColor: theme("colors.neutral.500"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.neutral.700"),
             },
             kbd: {
+              color: theme("colors.neutral.200"),
               backgroundColor: theme("colors.neutral.700"),
-                color: theme("colors.neutral.300"),
             },
             mark: {
               backgroundColor: theme("colors.secondary.400"),
             },
           },
-          ],
         },
       }),
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [
+    require("@tailwindcss/typography")({
+      className: "markdown",
+    }),
+  ],
 };