diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index a4370d53..ee600756 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1,6 +1,6 @@
 /*! Congo v2.2.3 | MIT License | https://github.com/jpanther/congo */
 
-/*! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #e5e7eb;
+  border-color: currentColor;
   /* 2 */
 }
 
@@ -187,6 +187,8 @@ textarea {
   /* 1 */
   font-size: 100%;
   /* 1 */
+  font-weight: inherit;
+  /* 1 */
   line-height: inherit;
   /* 1 */
   color: inherit;
@@ -415,15 +417,103 @@ video {
   height: auto;
 }
 
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
 }
 
-*, ::before, ::after {
+::-webkit-backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -485,14 +575,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   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));
+  -webkit-text-decoration-color: rgba(var(--color-primary-300), 1);
+          text-decoration-color: rgba(var(--color-primary-300), 1);
 }
 
 .prose :where(a):not(:where([class~="not-prose"] *)):hover {
-  color: rgb(var(--color-neutral));
+  color: rgba(var(--color-neutral), 1);
   text-decoration: none;
-  background-color: rgb(var(--color-primary-600));
+  background-color: rgba(var(--color-primary-600), 1);
   border-radius: 0.09rem;
 }
 
@@ -742,38 +832,38 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 
 .prose {
-  --tw-prose-body: rgb(var(--color-neutral-700));
-  --tw-prose-headings: rgb(var(--color-neutral-800));
-  --tw-prose-lead: rgb(var(--color-neutral-500));
-  --tw-prose-links: rgb(var(--color-primary-700));
-  --tw-prose-bold: rgb(var(--color-neutral-900));
-  --tw-prose-counters: rgb(var(--color-neutral-800));
-  --tw-prose-bullets: rgb(var(--color-neutral-500));
-  --tw-prose-hr: rgb(var(--color-neutral-200));
-  --tw-prose-quotes: rgb(var(--color-neutral-700));
-  --tw-prose-quote-borders: rgb(var(--color-primary-200));
-  --tw-prose-captions: rgb(var(--color-neutral-500));
-  --tw-prose-code: rgb(var(--color-secondary-700));
-  --tw-prose-pre-code: rgb(var(--color-neutral-700));
-  --tw-prose-pre-bg: rgb(var(--color-neutral-50));
-  --tw-prose-th-borders: rgb(var(--color-neutral-500));
-  --tw-prose-td-borders: rgb(var(--color-neutral-300));
-  --tw-prose-invert-body: rgb(var(--color-neutral-300));
-  --tw-prose-invert-headings: rgb(var(--color-neutral-50));
-  --tw-prose-invert-lead: rgb(var(--color-neutral-500));
-  --tw-prose-invert-links: rgb(var(--color-primary-400));
-  --tw-prose-invert-bold: rgb(var(--color-neutral));
-  --tw-prose-invert-counters: rgb(var(--color-neutral-400));
-  --tw-prose-invert-bullets: rgb(var(--color-neutral-600));
-  --tw-prose-invert-hr: rgb(var(--color-neutral-500));
-  --tw-prose-invert-quotes: rgb(var(--color-neutral-200));
-  --tw-prose-invert-quote-borders: rgb(var(--color-primary-900));
-  --tw-prose-invert-captions: rgb(var(--color-neutral-400));
-  --tw-prose-invert-code: rgb(var(--color-secondary-400));
-  --tw-prose-invert-pre-code: rgb(var(--color-neutral-200));
-  --tw-prose-invert-pre-bg: rgb(var(--color-neutral-700));
-  --tw-prose-invert-th-borders: rgb(var(--color-neutral-500));
-  --tw-prose-invert-td-borders: rgb(var(--color-neutral-700));
+  --tw-prose-body: rgba(var(--color-neutral-700), 1);
+  --tw-prose-headings: rgba(var(--color-neutral-800), 1);
+  --tw-prose-lead: rgba(var(--color-neutral-500), 1);
+  --tw-prose-links: rgba(var(--color-primary-700), 1);
+  --tw-prose-bold: rgba(var(--color-neutral-900), 1);
+  --tw-prose-counters: rgba(var(--color-neutral-800), 1);
+  --tw-prose-bullets: rgba(var(--color-neutral-500), 1);
+  --tw-prose-hr: rgba(var(--color-neutral-200), 1);
+  --tw-prose-quotes: rgba(var(--color-neutral-700), 1);
+  --tw-prose-quote-borders: rgba(var(--color-primary-200), 1);
+  --tw-prose-captions: rgba(var(--color-neutral-500), 1);
+  --tw-prose-code: rgba(var(--color-secondary-700), 1);
+  --tw-prose-pre-code: rgba(var(--color-neutral-700), 1);
+  --tw-prose-pre-bg: rgba(var(--color-neutral-50), 1);
+  --tw-prose-th-borders: rgba(var(--color-neutral-500), 1);
+  --tw-prose-td-borders: rgba(var(--color-neutral-300), 1);
+  --tw-prose-invert-body: rgba(var(--color-neutral-300), 1);
+  --tw-prose-invert-headings: rgba(var(--color-neutral-50), 1);
+  --tw-prose-invert-lead: rgba(var(--color-neutral-500), 1);
+  --tw-prose-invert-links: rgba(var(--color-primary-400), 1);
+  --tw-prose-invert-bold: rgba(var(--color-neutral), 1);
+  --tw-prose-invert-counters: rgba(var(--color-neutral-400), 1);
+  --tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1);
+  --tw-prose-invert-hr: rgba(var(--color-neutral-500), 1);
+  --tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1);
+  --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1);
+  --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
+  --tw-prose-invert-code: rgba(var(--color-secondary-400), 1);
+  --tw-prose-invert-pre-code: rgba(var(--color-neutral-200), 1);
+  --tw-prose-invert-pre-bg: rgba(var(--color-neutral-700), 1);
+  --tw-prose-invert-th-borders: rgba(var(--color-neutral-500), 1);
+  --tw-prose-invert-td-borders: rgba(var(--color-neutral-700), 1);
   font-size: 1rem;
   line-height: 1.75;
 }
@@ -886,7 +976,7 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 
 .prose :where(kbd):not(:where([class~="not-prose"] *)) {
-  background-color: rgb(var(--color-neutral-200));
+  background-color: rgba(var(--color-neutral-200), 1);
   padding: 0.1rem 0.4rem;
   border-radius: 0.25rem;
   font-size: 0.9rem;
@@ -894,13 +984,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 }
 
 .prose :where(mark):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-800));
-  background-color: rgb(var(--color-secondary-200));
+  color: rgba(var(--color-neutral-800), 1);
+  background-color: rgba(var(--color-secondary-200), 1);
   padding: 0.1rem 0.2rem;
   border-radius: 0.12rem;
 }
 
-body a, body button {
+body a, 
+body button {
   transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
@@ -917,7 +1008,10 @@ body a, body button {
 
 /* Search */
 
-#search-query::-webkit-search-cancel-button, #search-query::-webkit-search-decoration, #search-query::-webkit-search-results-button, #search-query::-webkit-search-results-decoration {
+#search-query::-webkit-search-cancel-button, 
+#search-query::-webkit-search-decoration, 
+#search-query::-webkit-search-results-button, 
+#search-query::-webkit-search-results-decoration {
   display: none;
 }
 
@@ -929,28 +1023,33 @@ body a, body button {
   padding-right: 1rem;
 }
 
-[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li {
+[dir="rtl"] .prose ul > li, [dir="rtl"] 
+.prose 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"] .prose ol > li:before, [dir="rtl"] 
+.prose ul > li:before {
   left: auto;
   right: 0.25rem;
 }
 
-[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child {
+[dir="rtl"] .prose thead td:first-child, [dir="rtl"] 
+.prose thead th:first-child {
   padding-right: 0px;
 }
 
-[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child {
+[dir="rtl"] .prose thead td:last-child, [dir="rtl"] 
+.prose thead th:last-child {
   padding-left: 0px;
 }
 
 /* Table of Contents */
 
-.toc ul, .toc li {
+.toc ul, 
+.toc li {
   list-style-type: none;
   padding-left: 0px;
   padding-right: 0px;
@@ -1025,12 +1124,18 @@ body a, body button {
   color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
 }
 
-.copy-button:hover, .copy-button:focus, .copy-button:active, .copy-button:active:hover {
+.copy-button:hover, 
+.copy-button:focus, 
+.copy-button:active, 
+.copy-button:active:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
 }
 
-.dark .copy-button:hover, .dark .copy-button:focus, .dark .copy-button:active, .dark .copy-button:active:hover {
+.dark .copy-button:hover, .dark 
+.copy-button:focus, .dark 
+.copy-button:active, .dark 
+.copy-button:active:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
@@ -1063,7 +1168,8 @@ body a, body button {
 
 /* LineTableTD */
 
-.chroma .lntd, .chroma .lntd pre {
+.chroma .lntd, 
+.chroma .lntd pre {
   margin: 0px;
   border-style: none;
   padding: 0px;
@@ -1112,7 +1218,8 @@ body a, body button {
 
 /* LineNumbers */
 
-.chroma .lnt, .chroma .ln {
+.chroma .lnt, 
+.chroma .ln {
   margin-right: 0.4em;
   padding-left: 0.4em;
   padding-right: 0.4em;
@@ -1122,7 +1229,8 @@ body a, body button {
   color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
 }
 
-.dark .chroma .lnt, .dark .chroma .ln {
+.dark .chroma .lnt, .dark 
+.chroma .ln {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
 }
@@ -1147,12 +1255,30 @@ body a, body button {
 
 /* Operator */
 
-.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
+.chroma .k, 
+.chroma .kd, 
+.chroma .kn, 
+.chroma .kp, 
+.chroma .kr, 
+.chroma .nc, 
+.chroma .fm, 
+.chroma .nn, 
+.chroma .vc, 
+.chroma .o {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
 }
 
-.dark .chroma .k, .dark .chroma .kd, .dark .chroma .kn, .dark .chroma .kp, .dark .chroma .kr, .dark .chroma .nc, .dark .chroma .fm, .dark .chroma .nn, .dark .chroma .vc, .dark .chroma .o {
+.dark .chroma .k, .dark 
+.chroma .kd, .dark 
+.chroma .kn, .dark 
+.chroma .kp, .dark 
+.chroma .kr, .dark 
+.chroma .nc, .dark 
+.chroma .fm, .dark 
+.chroma .nn, .dark 
+.chroma .vc, .dark 
+.chroma .o {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-300), var(--tw-text-opacity));
 }
@@ -1192,12 +1318,32 @@ body a, body button {
 
 /* LiteralNumberOct */
 
-.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
+.chroma .kt, 
+.chroma .nv, 
+.chroma .vi, 
+.chroma .vm, 
+.chroma .m, 
+.chroma .mb, 
+.chroma .mf, 
+.chroma .mh, 
+.chroma .mi, 
+.chroma .il, 
+.chroma .mo {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
 }
 
-.dark .chroma .kt, .dark .chroma .nv, .dark .chroma .vi, .dark .chroma .vm, .dark .chroma .m, .dark .chroma .mb, .dark .chroma .mf, .dark .chroma .mh, .dark .chroma .mi, .dark .chroma .il, .dark .chroma .mo {
+.dark .chroma .kt, .dark 
+.chroma .nv, .dark 
+.chroma .vi, .dark 
+.chroma .vm, .dark 
+.chroma .m, .dark 
+.chroma .mb, .dark 
+.chroma .mf, .dark 
+.chroma .mh, .dark 
+.chroma .mi, .dark 
+.chroma .il, .dark 
+.chroma .mo {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
 }
@@ -1210,12 +1356,18 @@ body a, body button {
 
 /* NameLabel */
 
-.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
+.chroma .n, 
+.chroma .nd, 
+.chroma .ni, 
+.chroma .nl {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-900), var(--tw-text-opacity));
 }
 
-.dark .chroma .n, .dark .chroma .nd, .dark .chroma .ni, .dark .chroma .nl {
+.dark .chroma .n, .dark 
+.chroma .nd, .dark 
+.chroma .ni, .dark 
+.chroma .nl {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
 }
@@ -1232,12 +1384,22 @@ body a, body button {
 
 /* NameTag */
 
-.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
+.chroma .na, 
+.chroma .nb, 
+.chroma .bp, 
+.chroma .nx, 
+.chroma .py, 
+.chroma .nt {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-800), var(--tw-text-opacity));
 }
 
-.dark .chroma .na, .dark .chroma .nb, .dark .chroma .bp, .dark .chroma .nx, .dark .chroma .py, .dark .chroma .nt {
+.dark .chroma .na, .dark 
+.chroma .nb, .dark 
+.chroma .bp, .dark 
+.chroma .nx, .dark 
+.chroma .py, .dark 
+.chroma .nt {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
 }
@@ -1248,13 +1410,17 @@ body a, body button {
 
 /* NameVariableGlobal */
 
-.chroma .no, .chroma .ne, .chroma .vg {
+.chroma .no, 
+.chroma .ne, 
+.chroma .vg {
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
 }
 
-.dark .chroma .no, .dark .chroma .ne, .dark .chroma .vg {
+.dark .chroma .no, .dark 
+.chroma .ne, .dark 
+.chroma .vg {
   --tw-text-opacity: 1;
   color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
 }
@@ -1303,12 +1469,42 @@ body a, body button {
 
 /* GenericPrompt */
 
-.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
+.chroma .l, 
+.chroma .ld, 
+.chroma .s, 
+.chroma .sa, 
+.chroma .sb, 
+.chroma .sc, 
+.chroma .dl, 
+.chroma .sd, 
+.chroma .s2, 
+.chroma .sh, 
+.chroma .si, 
+.chroma .sx, 
+.chroma .s1, 
+.chroma .gi, 
+.chroma .go, 
+.chroma .gp {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
-.dark .chroma .l, .dark .chroma .ld, .dark .chroma .s, .dark .chroma .sa, .dark .chroma .sb, .dark .chroma .sc, .dark .chroma .dl, .dark .chroma .sd, .dark .chroma .s2, .dark .chroma .sh, .dark .chroma .si, .dark .chroma .sx, .dark .chroma .s1, .dark .chroma .gi, .dark .chroma .go, .dark .chroma .gp {
+.dark .chroma .l, .dark 
+.chroma .ld, .dark 
+.chroma .s, .dark 
+.chroma .sa, .dark 
+.chroma .sb, .dark 
+.chroma .sc, .dark 
+.chroma .dl, .dark 
+.chroma .sd, .dark 
+.chroma .s2, .dark 
+.chroma .sh, .dark 
+.chroma .si, .dark 
+.chroma .sx, .dark 
+.chroma .s1, .dark 
+.chroma .gi, .dark 
+.chroma .go, .dark 
+.chroma .gp {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
 }
@@ -1330,13 +1526,15 @@ body a, body button {
 
 /* LiteralStringSymbol */
 
-.chroma .sr, .chroma .ss {
+.chroma .sr, 
+.chroma .ss {
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-800), var(--tw-text-opacity));
 }
 
-.dark .chroma .sr, .dark .chroma .ss {
+.dark .chroma .sr, .dark 
+.chroma .ss {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));
 }
@@ -1366,13 +1564,23 @@ body a, body button {
 
 /* CommentPreprocFile */
 
-.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
+.chroma .c, 
+.chroma .cm, 
+.chroma .c1, 
+.chroma .cs, 
+.chroma .cp, 
+.chroma .cpf {
   font-style: italic;
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
 }
 
-.dark .chroma .c, .dark .chroma .cm, .dark .chroma .c1, .dark .chroma .cs, .dark .chroma .cp, .dark .chroma .cpf {
+.dark .chroma .c, .dark 
+.chroma .cm, .dark 
+.chroma .c1, .dark 
+.chroma .cs, .dark 
+.chroma .cp, .dark 
+.chroma .cpf {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
 }
@@ -1415,7 +1623,8 @@ body a, body button {
 
 /* GenericTraceback */
 
-.chroma .gu, .chroma .gt {
+.chroma .gu, 
+.chroma .gt {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
 }
@@ -2157,13 +2366,13 @@ body a, body button {
 }
 
 .decoration-primary-500 {
-  -webkit-text-decoration-color: rgb(var(--color-primary-500));
-          text-decoration-color: rgb(var(--color-primary-500));
+  -webkit-text-decoration-color: rgba(var(--color-primary-500), 1);
+          text-decoration-color: rgba(var(--color-primary-500), 1);
 }
 
 .decoration-neutral-300 {
-  -webkit-text-decoration-color: rgb(var(--color-neutral-300));
-          text-decoration-color: rgb(var(--color-neutral-300));
+  -webkit-text-decoration-color: rgba(var(--color-neutral-300), 1);
+          text-decoration-color: rgba(var(--color-neutral-300), 1);
 }
 
 .opacity-0 {
@@ -2249,8 +2458,8 @@ body a, body button {
 }
 
 .hover\:decoration-primary-400:hover {
-  -webkit-text-decoration-color: rgb(var(--color-primary-400));
-          text-decoration-color: rgb(var(--color-primary-400));
+  -webkit-text-decoration-color: rgba(var(--color-primary-400), 1);
+          text-decoration-color: rgba(var(--color-primary-400), 1);
 }
 
 .hover\:decoration-2:hover {
@@ -2299,8 +2508,8 @@ body a, body button {
 }
 
 .group:hover .group-hover\:decoration-primary-500 {
-  -webkit-text-decoration-color: rgb(var(--color-primary-500));
-          text-decoration-color: rgb(var(--color-primary-500));
+  -webkit-text-decoration-color: rgba(var(--color-primary-500), 1);
+          text-decoration-color: rgba(var(--color-primary-500), 1);
 }
 
 .group:hover .group-hover\:opacity-100 {
@@ -2447,17 +2656,17 @@ body a, body button {
 }
 
 .dark .dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) {
-  -webkit-text-decoration-color: rgb(var(--color-neutral-600));
-          text-decoration-color: rgb(var(--color-neutral-600));
+  -webkit-text-decoration-color: rgba(var(--color-neutral-600), 1);
+          text-decoration-color: rgba(var(--color-neutral-600), 1);
 }
 
 .dark .dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) {
-  color: rgb(var(--color-neutral-200));
-  background-color: rgb(var(--color-neutral-700));
+  color: rgba(var(--color-neutral-200), 1);
+  background-color: rgba(var(--color-neutral-700), 1);
 }
 
 .dark .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) {
-  background-color: rgb(var(--color-secondary-400));
+  background-color: rgba(var(--color-secondary-400), 1);
 }
 
 .dark .dark\:inline {
diff --git a/package-lock.json b/package-lock.json
index b9419d29..9b0707a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "prettier": "^2.7.1",
         "prettier-plugin-go-template": "^0.0.13",
         "rimraf": "^3.0.2",
-        "tailwindcss": "^3.0.24",
+        "tailwindcss": "^3.1.4",
         "vendor-copy": "^3.0.1"
       }
     },
@@ -77,18 +77,7 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
       }
     },
-    "node_modules/acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
-    "node_modules/acorn-node/node_modules/acorn": {
+    "node_modules/acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
@@ -100,6 +89,17 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -123,9 +123,9 @@
       }
     },
     "node_modules/arg": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
-      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
     "node_modules/balanced-match": {
@@ -1006,7 +1006,7 @@
     "node_modules/defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
       "dev": true
     },
     "node_modules/delaunator": {
@@ -1019,14 +1019,14 @@
       }
     },
     "node_modules/detective": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
       "dev": true,
       "dependencies": {
-        "acorn-node": "^1.6.1",
+        "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
-        "minimist": "^1.1.1"
+        "minimist": "^1.2.6"
       },
       "bin": {
         "detective": "bin/detective.js"
@@ -1400,9 +1400,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
-      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -1480,10 +1480,19 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
-      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
       "dev": true,
       "funding": [
         {
@@ -1496,7 +1505,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.1",
+        "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -1504,6 +1513,23 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-js": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -1652,6 +1678,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1775,15 +1810,15 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.0.24",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
-      "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
+      "integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
       "dev": true,
       "dependencies": {
-        "arg": "^5.0.1",
+        "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.0",
+        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.11",
@@ -1793,7 +1828,8 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
         "postcss-nested": "5.0.6",
@@ -1930,6 +1966,12 @@
         "lodash.merge": "^4.6.2"
       }
     },
+    "acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true
+    },
     "acorn-node": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
@@ -1939,14 +1981,6 @@
         "acorn": "^7.0.0",
         "acorn-walk": "^7.0.0",
         "xtend": "^4.0.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
-        }
       }
     },
     "acorn-walk": {
@@ -1966,9 +2000,9 @@
       }
     },
     "arg": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
-      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
     "balanced-match": {
@@ -2699,7 +2733,7 @@
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
       "dev": true
     },
     "delaunator": {
@@ -2712,14 +2746,14 @@
       }
     },
     "detective": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
       "dev": true,
       "requires": {
-        "acorn-node": "^1.6.1",
+        "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
-        "minimist": "^1.1.1"
+        "minimist": "^1.2.6"
       }
     },
     "didyoumean": {
@@ -3018,9 +3052,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
-      "integrity": "sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
       "dev": true
     },
     "ncp": {
@@ -3074,17 +3108,34 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
     "postcss": {
-      "version": "8.4.12",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz",
-      "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==",
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.1",
+        "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
     "postcss-js": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -3156,6 +3207,15 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3237,15 +3297,15 @@
       "dev": true
     },
     "tailwindcss": {
-      "version": "3.0.24",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
-      "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
+      "integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
       "dev": true,
       "requires": {
-        "arg": "^5.0.1",
+        "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.0",
+        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.11",
@@ -3255,7 +3315,8 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
         "postcss-nested": "5.0.6",
diff --git a/package.json b/package.json
index 5a01f729..9cd3f2b8 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "prettier": "^2.7.1",
     "prettier-plugin-go-template": "^0.0.13",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.4",
     "vendor-copy": "^3.0.1"
   },
   "vendorCopy": [],
diff --git a/tailwind.config.js b/tailwind.config.js
index 79e53473..6c3b01f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,3 @@
-const colors = require("tailwindcss/colors");
-
-function varWithOpacity(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgba(var(${variable}), ${opacityValue})`;
-  };
-}
-
 module.exports = {
   content: [
     "./layouts/**/*.html",
@@ -18,89 +7,90 @@ module.exports = {
   ],
   darkMode: "class",
   theme: {
-    extend: {
-      colors: {
-        neutral: {
-          DEFAULT: varWithOpacity("--color-neutral"),
-          50: varWithOpacity("--color-neutral-50"),
-          100: varWithOpacity("--color-neutral-100"),
-          200: varWithOpacity("--color-neutral-200"),
-          300: varWithOpacity("--color-neutral-300"),
-          400: varWithOpacity("--color-neutral-400"),
-          500: varWithOpacity("--color-neutral-500"),
-          600: varWithOpacity("--color-neutral-600"),
-          700: varWithOpacity("--color-neutral-700"),
-          800: varWithOpacity("--color-neutral-800"),
-          900: varWithOpacity("--color-neutral-900"),
-        },
-        primary: {
-          50: varWithOpacity("--color-primary-50"),
-          100: varWithOpacity("--color-primary-100"),
-          200: varWithOpacity("--color-primary-200"),
-          300: varWithOpacity("--color-primary-300"),
-          400: varWithOpacity("--color-primary-400"),
-          500: varWithOpacity("--color-primary-500"),
-          600: varWithOpacity("--color-primary-600"),
-          700: varWithOpacity("--color-primary-700"),
-          800: varWithOpacity("--color-primary-800"),
-          900: varWithOpacity("--color-primary-900"),
-        },
-        secondary: {
-          50: varWithOpacity("--color-secondary-50"),
-          100: varWithOpacity("--color-secondary-100"),
-          200: varWithOpacity("--color-secondary-200"),
-          300: varWithOpacity("--color-secondary-300"),
-          400: varWithOpacity("--color-secondary-400"),
-          500: varWithOpacity("--color-secondary-500"),
-          600: varWithOpacity("--color-secondary-600"),
-          700: varWithOpacity("--color-secondary-700"),
-          800: varWithOpacity("--color-secondary-800"),
-          900: varWithOpacity("--color-secondary-900"),
-        },
+    colors: {
+      transparent: "transparent",
+      neutral: {
+        DEFAULT: "rgba(var(--color-neutral), <alpha-value>)",
+        50: "rgba(var(--color-neutral-50), <alpha-value>)",
+        100: "rgba(var(--color-neutral-100), <alpha-value>)",
+        200: "rgba(var(--color-neutral-200), <alpha-value>)",
+        300: "rgba(var(--color-neutral-300), <alpha-value>)",
+        400: "rgba(var(--color-neutral-400), <alpha-value>)",
+        500: "rgba(var(--color-neutral-500), <alpha-value>)",
+        600: "rgba(var(--color-neutral-600), <alpha-value>)",
+        700: "rgba(var(--color-neutral-700), <alpha-value>)",
+        800: "rgba(var(--color-neutral-800), <alpha-value>)",
+        900: "rgba(var(--color-neutral-900), <alpha-value>)",
       },
-      typography: (theme) => ({
+      primary: {
+        50: "rgba(var(--color-primary-50), <alpha-value>)",
+        100: "rgba(var(--color-primary-100), <alpha-value>)",
+        200: "rgba(var(--color-primary-200), <alpha-value>)",
+        300: "rgba(var(--color-primary-300), <alpha-value>)",
+        400: "rgba(var(--color-primary-400), <alpha-value>)",
+        500: "rgba(var(--color-primary-500), <alpha-value>)",
+        600: "rgba(var(--color-primary-600), <alpha-value>)",
+        700: "rgba(var(--color-primary-700), <alpha-value>)",
+        800: "rgba(var(--color-primary-800), <alpha-value>)",
+        900: "rgba(var(--color-primary-900), <alpha-value>)",
+      },
+      secondary: {
+        50: "rgba(var(--color-secondary-50), <alpha-value>)",
+        100: "rgba(var(--color-secondary-100), <alpha-value>)",
+        200: "rgba(var(--color-secondary-200), <alpha-value>)",
+        300: "rgba(var(--color-secondary-300), <alpha-value>)",
+        400: "rgba(var(--color-secondary-400), <alpha-value>)",
+        500: "rgba(var(--color-secondary-500), <alpha-value>)",
+        600: "rgba(var(--color-secondary-600), <alpha-value>)",
+        700: "rgba(var(--color-secondary-700), <alpha-value>)",
+        800: "rgba(var(--color-secondary-800), <alpha-value>)",
+        900: "rgba(var(--color-secondary-900), <alpha-value>)",
+      },
+    },
+    extend: {
+      typography: ({ theme }) => ({
         DEFAULT: {
           css: {
-            "--tw-prose-body": 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"),
+            "--tw-prose-body": theme("colors.neutral.700 / 1"),
+            "--tw-prose-headings": theme("colors.neutral.800 / 1"),
+            "--tw-prose-lead": theme("colors.neutral.500 / 1"),
+            "--tw-prose-links": theme("colors.primary.700 / 1"),
+            "--tw-prose-bold": theme("colors.neutral.900 / 1"),
+            "--tw-prose-counters": theme("colors.neutral.800 / 1"),
+            "--tw-prose-bullets": theme("colors.neutral.500 / 1"),
+            "--tw-prose-hr": theme("colors.neutral.200 / 1"),
+            "--tw-prose-quotes": theme("colors.neutral.700 / 1"),
+            "--tw-prose-quote-borders": theme("colors.primary.200 / 1"),
+            "--tw-prose-captions": theme("colors.neutral.500 / 1"),
+            "--tw-prose-code": theme("colors.secondary.700 / 1"),
+            "--tw-prose-pre-code": theme("colors.neutral.700 / 1"),
+            "--tw-prose-pre-bg": theme("colors.neutral.50 / 1"),
+            "--tw-prose-th-borders": theme("colors.neutral.500 / 1"),
+            "--tw-prose-td-borders": theme("colors.neutral.300 / 1"),
+            "--tw-prose-invert-body": theme("colors.neutral.300 / 1"),
+            "--tw-prose-invert-headings": theme("colors.neutral.50 / 1"),
+            "--tw-prose-invert-lead": theme("colors.neutral.500 / 1"),
+            "--tw-prose-invert-links": theme("colors.primary.400 / 1"),
+            "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT / 1"),
+            "--tw-prose-invert-counters": theme("colors.neutral.400 / 1"),
+            "--tw-prose-invert-bullets": theme("colors.neutral.600 / 1"),
+            "--tw-prose-invert-hr": theme("colors.neutral.500 / 1"),
+            "--tw-prose-invert-quotes": theme("colors.neutral.200 / 1"),
+            "--tw-prose-invert-quote-borders": theme("colors.primary.900 / 1"),
+            "--tw-prose-invert-captions": theme("colors.neutral.400 / 1"),
+            "--tw-prose-invert-code": theme("colors.secondary.400 / 1"),
+            "--tw-prose-invert-pre-code": theme("colors.neutral.200 / 1"),
+            "--tw-prose-invert-pre-bg": theme("colors.neutral.700 / 1"),
+            "--tw-prose-invert-th-borders": theme("colors.neutral.500 / 1"),
+            "--tw-prose-invert-td-borders": theme("colors.neutral.700 / 1"),
             a: {
               textDecoration: "underline",
-              textDecorationColor: theme("colors.primary.300"),
+              textDecorationColor: theme("colors.primary.300 / 1"),
               fontWeight: "500",
               "&:hover": {
-                color: theme("colors.neutral.DEFAULT"),
+                color: theme("colors.neutral.DEFAULT / 1"),
                 textDecoration: "none",
-                backgroundColor: theme("colors.primary.600"),
+                backgroundColor: theme("colors.primary.600 / 1"),
                 borderRadius: "0.09rem",
               },
             },
@@ -108,15 +98,15 @@ module.exports = {
               color: "var(--tw-prose-code)",
             },
             kbd: {
-              backgroundColor: theme("colors.neutral.200"),
+              backgroundColor: theme("colors.neutral.200 / 1"),
               padding: "0.1rem 0.4rem",
               borderRadius: "0.25rem",
               fontSize: "0.9rem",
               fontWeight: "600",
             },
             mark: {
-              color: theme("colors.neutral.800"),
-              backgroundColor: theme("colors.secondary.200"),
+              color: theme("colors.neutral.800 / 1"),
+              backgroundColor: theme("colors.secondary.200 / 1"),
               padding: "0.1rem 0.2rem",
               borderRadius: "0.12rem",
             },
@@ -125,14 +115,14 @@ module.exports = {
         invert: {
           css: {
             a: {
-              textDecorationColor: theme("colors.neutral.600"),
+              textDecorationColor: theme("colors.neutral.600 / 1"),
             },
             kbd: {
-              color: theme("colors.neutral.200"),
-              backgroundColor: theme("colors.neutral.700"),
+              color: theme("colors.neutral.200 / 1"),
+              backgroundColor: theme("colors.neutral.700 / 1"),
             },
             mark: {
-              backgroundColor: theme("colors.secondary.400"),
+              backgroundColor: theme("colors.secondary.400 / 1"),
             },
           },
         },