From 3b9bb1c4c985fae0160692c45fe3cecd7c086bf6 Mon Sep 17 00:00:00 2001
From: Sujal Goel <goelsujal9@gmail.com>
Date: Thu, 2 Apr 2026 21:47:07 +0530
Subject: [PATCH 1/3] refactor(Markdown): replace Sass with plain CSS and
 Tailwind @apply

Removes Sass dependencies from Markdown.scss and prism-theme.scss.
Converted to plain CSS files with @apply for Tailwind utilities.
Inlined all Sass variables, functions (getFontSize, getColor), and
color.adjust() calls as computed values. Replaced @include break
with plain @media (min-width: 768px). Added @reference directive
for Tailwind v4 @apply support.

Part of #8047.
---
 .../Markdown/{Markdown.scss => Markdown.css}  | 177 ++++++++----------
 src/components/Markdown/Markdown.jsx          |   2 +-
 .../{prism-theme.scss => prism-theme.css}     |  30 ++-
 3 files changed, 89 insertions(+), 120 deletions(-)
 rename src/components/Markdown/{Markdown.scss => Markdown.css} (59%)
 rename src/components/Markdown/{prism-theme.scss => prism-theme.css} (69%)

diff --git a/src/components/Markdown/Markdown.scss b/src/components/Markdown/Markdown.css
similarity index 59%
rename from src/components/Markdown/Markdown.scss
rename to src/components/Markdown/Markdown.css
index c7b53198f61f..7ead97b9df19 100644
--- a/src/components/Markdown/Markdown.scss
+++ b/src/components/Markdown/Markdown.css
@@ -1,40 +1,36 @@
-@use "sass:color";
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/functions" as *;
-@use "../../styles/partials/mixins" as *;
-@use "prism-theme";
-
-$bannerHeight: 56px;
-$navigationHeight: 56px;
-$navigationSubHeight: 28px;
-$someExtraHeight: 10px;
-
-$topHeightDesktop: $navigationHeight + $navigationSubHeight + $someExtraHeight;
-$topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
-
-$topHeightMobile: $navigationHeight;
-$topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
+@reference "tailwindcss";
+@import "./prism-theme.css";
+
+/*
+  Local constants (previously Sass variables):
+  $bannerHeight: 56px
+  $navigationHeight: 56px
+  $navigationSubHeight: 28px
+  $someExtraHeight: 10px
+  $topHeightDesktop: 94px  (56 + 28 + 10)
+  $topHeightMobile: 56px
+*/
 
 .markdown {
-  line-height: 1.5em;
+  @apply leading-normal;
 
   h1 {
-    font-size: getFontSize(4);
+    font-size: 33.178px;
   }
   h2 {
-    font-size: getFontSize(3);
+    font-size: 27.648px;
   }
   h3 {
-    font-size: getFontSize(2);
+    font-size: 23.04px;
   }
   h4 {
-    font-size: getFontSize(1);
+    font-size: 19.2px;
   }
   h5 {
-    font-size: getFontSize(0);
+    font-size: 16px;
   }
   h6 {
-    font-size: getFontSize(-1);
+    font-size: 13.331px;
   }
 
   h2,
@@ -43,16 +39,12 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   h5,
   h6 {
     > span[id] {
-      position: absolute;
-      width: 0;
-      display: block;
-      visibility: hidden;
-      pointer-events: none;
-      padding-top: $topHeightMobile;
-      margin-top: -#{$topHeightMobile};
-      @include break {
-        padding-top: $topHeightDesktop;
-        margin-top: -#{$topHeightDesktop};
+      @apply absolute w-0 block invisible pointer-events-none;
+      padding-top: 56px;
+      margin-top: -56px;
+      @media (min-width: 768px) {
+        padding-top: 94px;
+        margin-top: -94px;
       }
     }
   }
@@ -63,12 +55,13 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   h4,
   h5,
   h6 {
-    display: block;
-    font-family: $font-stack-heading;
-    font-weight: 600;
+    @apply block font-semibold;
+    font-family:
+      "Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
+      serif;
     line-height: 1.4;
     margin: 0 0 0.25em;
-    color: color.adjust(getColor(fiord), $lightness: -10%);
+    color: #32434a;
     word-break: break-word;
 
     tt,
@@ -81,14 +74,12 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
       margin-left: 8px;
       font-size: 0.8em;
       height: 1em;
-      opacity: 0;
-      visibility: hidden;
+      @apply opacity-0 invisible;
       transition: all 250ms;
     }
 
     &:hover a[aria-hidden="true"] {
-      opacity: 1;
-      visibility: visible;
+      @apply opacity-100 visible;
     }
   }
 
@@ -116,8 +107,8 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   }
 
   hr {
-    border: none;
-    background-color: getColor(alto);
+    @apply border-none;
+    background-color: #dedede;
     height: 3px;
     margin: 2em 0;
   }
@@ -137,9 +128,8 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
 
   dl {
     dt {
-      font-size: getFontSize(0);
-      font-weight: bold;
-      font-style: italic;
+      font-size: 16px;
+      @apply font-bold italic;
       margin: 15px 0 5px;
 
       &:first-child {
@@ -166,7 +156,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   aside {
     border-left: 4px solid #dddddd;
     padding: 0.75em 1em;
-    color: getColor(dove-grey);
+    color: #666666;
     > :first-child {
       margin-top: 0;
     }
@@ -181,7 +171,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
       border-left-style: solid;
 
       .tip-content {
-        font-style: italic;
+        @apply italic;
       }
 
       code {
@@ -192,30 +182,27 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
       > .warning__prefix,
       > .preview__prefix,
       > .todo__prefix {
-        text-transform: capitalize;
-        font-weight: 600; // slightly bold but not heading-level
+        @apply capitalize font-semibold block;
         color: #1a1a1a;
-        font-size: getFontSize(0);
-        display: block;
+        font-size: 16px;
         margin-bottom: 0.25em;
-        color: #1a1a1a;
       }
     }
 
     &.tip {
       background-color: #eaf8ff;
       color: #4e7182;
-      border-left-color: color.adjust(#eaf8ff, $lightness: -40%);
+      border-left-color: #1eb4ff;
     }
 
     &.warning {
       background-color: #fdf5d8;
       color: #716b53;
-      border-left-color: color.adjust(#fdf5d8, $lightness: -40%);
+      border-left-color: #f3c316;
     }
 
     &.preview {
-      background-color: getColor(concrete);
+      background-color: #f2f2f2;
       color: #716b53;
       border-left-color: #1e72b3;
     }
@@ -223,7 +210,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     &.todo {
       background-color: #fbddcd;
       color: #907a6e;
-      border-left-color: color.adjust(#fbddcd, $lightness: -40%);
+      border-left-color: #e95d13;
 
       .tip-content::before {
         content: "[TODO]: ";
@@ -235,8 +222,8 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   blockquote {
     border-left: 4px solid #dddddd;
     padding: 0.75em 1em;
-    color: getColor(dove-grey);
-    font-style: italic;
+    color: #666666;
+    @apply italic;
 
     > :first-child {
       margin-top: 0;
@@ -249,10 +236,8 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   table {
     margin: 1em 0;
 
-    @include break {
-      display: block;
-      overflow-x: auto;
-      overflow-y: hidden;
+    @media (min-width: 768px) {
+      @apply block overflow-x-auto overflow-y-hidden;
     }
 
     p {
@@ -265,17 +250,16 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   }
 
   thead {
-    display: none;
-    @include break {
+    @apply hidden;
+    @media (min-width: 768px) {
       display: table-header-group;
     }
   }
 
   th {
-    font-weight: bold;
-    text-align: left;
+    @apply font-bold text-left;
     padding: 6px 12px;
-    background: color.adjust(#f4f6f6, $lightness: -1%);
+    background: #f1f4f4;
     border-right: 1px solid #cccccc;
 
     &:last-child {
@@ -294,10 +278,10 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
       border-bottom: 1px solid #cccccc;
     }
 
-    display: block;
+    @apply block;
     margin-bottom: 10px;
 
-    @include break {
+    @media (min-width: 768px) {
       margin-bottom: 0;
       display: table-row;
     }
@@ -306,18 +290,17 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   td {
     padding: 4px 12px;
     border-right: none;
-    display: grid;
+    @apply grid text-left;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-bottom: 1px solid getColor(concrete);
-    text-align: left;
+    border-bottom: 1px solid #f2f2f2;
     &::before {
       content: attr(data-th);
-      font-weight: bold;
+      @apply font-bold;
     }
     &:last-child {
       border-bottom: none;
     }
-    @include break {
+    @media (min-width: 768px) {
       display: table-cell;
       padding: 14px 22px;
       text-align: unset;
@@ -333,8 +316,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   }
 
   img:not([class*="support__"]) {
-    max-width: 100%;
-    height: auto;
+    @apply max-w-full h-auto;
   }
 
   b,
@@ -344,23 +326,24 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
 
   i,
   em {
-    font-style: italic;
+    @apply italic;
   }
 
   code,
   tt {
-    font-family: $font-stack-code;
+    font-family:
+      "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     font-size: 90%;
     margin: 0 2px;
     padding: 2px 6px;
     white-space: normal;
-    background-color: color.adjust(getColor(fiord), $alpha: -0.95);
+    background-color: rgba(70, 94, 105, 0.05);
     border-radius: 3px;
-    text-shadow: 0 1px 0 color.adjust(getColor(white), $alpha: -0.4);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
   }
 
   a code {
-    color: $text-color-highlight;
+    color: #1a6bac;
   }
   a {
     text-decoration: underline;
@@ -376,46 +359,41 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     font-size: 0.875rem;
     line-height: 1.5;
-    overflow: auto;
+    @apply overflow-auto;
 
     code {
       margin: 0;
       padding: 0;
       white-space: pre;
-      border: none;
+      @apply border-none;
       background: transparent;
-      text-shadow: 0 1px 0
-        color.adjust(
-          color.adjust(getColor(elephant), $lightness: -10%),
-          $alpha: -0.5
-        );
-      color: color.adjust(getColor(malibu), $saturation: -40%);
+      text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);
+      color: #a5cee1;
       font-family: monospace;
 
       .code-details-summary-span {
         margin-left: -15px;
-        cursor: pointer;
+        @apply cursor-pointer;
 
         &::after {
           content: "›";
-          float: left;
-          position: relative;
+          @apply float-left relative;
           left: -2px;
           text-align: center;
-          color: color.adjust(getColor(denim), $lightness: 10%);
+          color: #1e78c2;
           font-size: 16px;
         }
       }
 
       a {
-        border-bottom: 1px dotted getColor(denim);
+        border-bottom: 1px dotted #175d96;
       }
 
       .code-link {
-        position: relative;
+        @apply relative;
 
         &:hover {
-          color: color.adjust(getColor(denim), $lightness: 15%);
+          color: #2186d8;
         }
       }
     }
@@ -423,16 +401,15 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     code,
     tt {
       background-color: transparent;
-      border: none;
+      @apply border-none;
     }
   }
 
   p {
     code,
     tt {
-      max-width: 100%;
+      @apply max-w-full overflow-auto;
       line-height: initial;
-      overflow: auto;
       margin: 0;
     }
   }
diff --git a/src/components/Markdown/Markdown.jsx b/src/components/Markdown/Markdown.jsx
index aa575d778682..ee86c6a2df49 100644
--- a/src/components/Markdown/Markdown.jsx
+++ b/src/components/Markdown/Markdown.jsx
@@ -1,4 +1,4 @@
-import "./Markdown.scss";
+import "./Markdown.css";
 import PropTypes from "prop-types";
 
 const Markdown = (props) => <div className="markdown">{props.children}</div>;
diff --git a/src/components/Markdown/prism-theme.scss b/src/components/Markdown/prism-theme.css
similarity index 69%
rename from src/components/Markdown/prism-theme.scss
rename to src/components/Markdown/prism-theme.css
index 3805301aec7f..08b61914be7c 100644
--- a/src/components/Markdown/prism-theme.scss
+++ b/src/components/Markdown/prism-theme.css
@@ -1,7 +1,3 @@
-@use "../../styles/partials/functions" as *;
-@use "../../styles/partials/mixins" as *;
-@use "sass:color";
-
 code[class*="lang-"],
 pre[class*="lang-"] {
   text-align: left;
@@ -12,12 +8,14 @@ pre[class*="lang-"] {
   line-height: 1.5;
   tab-size: 4;
   hyphens: none;
-  color: color.adjust(getColor(malibu), $saturation: -40%);
-  @include fontantialias(false);
+  color: #a5cee1;
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+}
 
-  a {
-    color: inherit;
-  }
+code[class*="lang-"] a,
+pre[class*="lang-"] a {
+  color: inherit;
 }
 
 /* Code blocks */
@@ -25,7 +23,7 @@ pre[class*="lang-"] {
   padding: 0.4em 0.8em;
   margin: 0.5em 0;
   overflow: auto;
-  background-color: getColor(elephant);
+  background-color: #2b3a42;
 }
 
 /* Inline code */
@@ -57,10 +55,7 @@ pre[class*="lang-"] {
 .token.number,
 .token.constant,
 .token.symbol {
-  color: color.adjust(
-    color.adjust(getColor(malibu), $lightness: -15%),
-    $saturation: -15%
-  );
+  color: #53b7e6;
 }
 
 .token.selector,
@@ -70,7 +65,7 @@ pre[class*="lang-"] {
 .token.regex,
 .token.attr-value,
 .token.important {
-  color: color.adjust(#2dd271, $saturation: -23%);
+  color: #4ab576;
 }
 
 .token.inserted {
@@ -94,10 +89,7 @@ pre[class*="lang-"] {
 .token.attr-name,
 .token.keyword,
 .token.function {
-  color: color.adjust(
-    color.adjust(getColor(malibu), $lightness: -15%),
-    $saturation: -30%
-  );
+  color: #62b1d8;
 }
 
 .token.important,

From f64ca28e381b710922b3bb78c03f45852bc848fc Mon Sep 17 00:00:00 2001
From: Sujal Goel <goelsujal9@gmail.com>
Date: Thu, 2 Apr 2026 23:01:01 +0530
Subject: [PATCH 2/3] refactor(Markdown): use Tailwind utilities for colors,
 spacing, and sizing

---
 src/components/Markdown/Markdown.css | 172 +++++++++------------------
 1 file changed, 54 insertions(+), 118 deletions(-)

diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 7ead97b9df19..496308ca3693 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -15,22 +15,22 @@
   @apply leading-normal;
 
   h1 {
-    font-size: 33.178px;
+    @apply text-[33.178px];
   }
   h2 {
-    font-size: 27.648px;
+    @apply text-[27.648px];
   }
   h3 {
-    font-size: 23.04px;
+    @apply text-[23.04px];
   }
   h4 {
-    font-size: 19.2px;
+    @apply text-[19.2px];
   }
   h5 {
-    font-size: 16px;
+    @apply text-base;
   }
   h6 {
-    font-size: 13.331px;
+    @apply text-[13.331px];
   }
 
   h2,
@@ -39,12 +39,9 @@
   h5,
   h6 {
     > span[id] {
-      @apply absolute w-0 block invisible pointer-events-none;
-      padding-top: 56px;
-      margin-top: -56px;
+      @apply absolute w-0 block invisible pointer-events-none pt-14 -mt-14;
       @media (min-width: 768px) {
-        padding-top: 94px;
-        margin-top: -94px;
+        @apply pt-[94px] -mt-[94px];
       }
     }
   }
@@ -55,13 +52,11 @@
   h4,
   h5,
   h6 {
-    @apply block font-semibold;
+    @apply block font-semibold text-[#32434a] leading-[1.4];
     font-family:
       "Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
       serif;
-    line-height: 1.4;
     margin: 0 0 0.25em;
-    color: #32434a;
     word-break: break-word;
 
     tt,
@@ -71,10 +66,7 @@
     }
 
     a[aria-hidden="true"] {
-      margin-left: 8px;
-      font-size: 0.8em;
-      height: 1em;
-      @apply opacity-0 invisible;
+      @apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;
       transition: all 250ms;
     }
 
@@ -85,7 +77,7 @@
 
   h1:first-child {
     margin: 0;
-    line-height: 1;
+    @apply leading-none;
   }
 
   p,
@@ -93,29 +85,26 @@
   aside,
   table,
   pre {
-    margin: 1em 0;
+    @apply my-[1em];
   }
 
   ul,
   ol,
   dl {
-    margin: 0.5em 0 1em;
+    @apply mt-[0.5em] mb-[1em];
   }
 
   li {
-    margin: 0.5em 0;
+    @apply my-[0.5em];
   }
 
   hr {
-    @apply border-none;
-    background-color: #dedede;
-    height: 3px;
-    margin: 2em 0;
+    @apply border-none bg-gray-200 h-[3px] my-[2em];
   }
 
   ul,
   ol {
-    padding-left: 30px;
+    @apply pl-[30px];
     list-style: revert;
 
     &:first-child {
@@ -128,9 +117,7 @@
 
   dl {
     dt {
-      font-size: 16px;
-      @apply font-bold italic;
-      margin: 15px 0 5px;
+      @apply text-base font-bold italic mt-[15px] mb-[5px];
 
       &:first-child {
         padding: 0;
@@ -138,8 +125,7 @@
     }
 
     dd {
-      margin: 0 0 15px;
-      padding: 0 15px;
+      @apply mb-[15px] px-[15px];
     }
 
     dt,
@@ -154,9 +140,7 @@
   }
 
   aside {
-    border-left: 4px solid #dddddd;
-    padding: 0.75em 1em;
-    color: #666666;
+    @apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500;
     > :first-child {
       margin-top: 0;
     }
@@ -167,8 +151,7 @@
     &.warning,
     &.preview,
     &.todo {
-      border-left-width: 3px;
-      border-left-style: solid;
+      @apply border-l-[3px];
 
       .tip-content {
         @apply italic;
@@ -182,35 +165,24 @@
       > .warning__prefix,
       > .preview__prefix,
       > .todo__prefix {
-        @apply capitalize font-semibold block;
-        color: #1a1a1a;
-        font-size: 16px;
-        margin-bottom: 0.25em;
+        @apply capitalize font-semibold block text-base text-[#1a1a1a] mb-[0.25em];
       }
     }
 
     &.tip {
-      background-color: #eaf8ff;
-      color: #4e7182;
-      border-left-color: #1eb4ff;
+      @apply bg-[#eaf8ff] text-[#4e7182] border-l-[#1eb4ff];
     }
 
     &.warning {
-      background-color: #fdf5d8;
-      color: #716b53;
-      border-left-color: #f3c316;
+      @apply bg-[#fdf5d8] text-[#716b53] border-l-[#f3c316];
     }
 
     &.preview {
-      background-color: #f2f2f2;
-      color: #716b53;
-      border-left-color: #1e72b3;
+      @apply bg-gray-100 text-[#716b53] border-l-[#1e72b3];
     }
 
     &.todo {
-      background-color: #fbddcd;
-      color: #907a6e;
-      border-left-color: #e95d13;
+      @apply bg-[#fbddcd] text-[#907a6e] border-l-[#e95d13];
 
       .tip-content::before {
         content: "[TODO]: ";
@@ -220,10 +192,7 @@
   }
 
   blockquote {
-    border-left: 4px solid #dddddd;
-    padding: 0.75em 1em;
-    color: #666666;
-    @apply italic;
+    @apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500 italic;
 
     > :first-child {
       margin-top: 0;
@@ -234,7 +203,7 @@
   }
 
   table {
-    margin: 1em 0;
+    @apply my-[1em];
 
     @media (min-width: 768px) {
       @apply block overflow-x-auto overflow-y-hidden;
@@ -257,60 +226,49 @@
   }
 
   th {
-    @apply font-bold text-left;
-    padding: 6px 12px;
-    background: #f1f4f4;
-    border-right: 1px solid #cccccc;
+    @apply font-bold text-left py-1.5 px-3 bg-[#f1f4f4] border-r border-solid border-r-[#cccccc];
 
     &:last-child {
-      border-right: none;
+      @apply border-r-0;
     }
   }
 
   tr {
-    border: 1px solid #cccccc;
+    @apply border border-solid border-[#cccccc] block mb-2.5;
 
     &:nth-child(2n) {
-      background-color: #f8f8f8;
+      @apply bg-[#f8f8f8];
     }
 
     &:last-child {
-      border-bottom: 1px solid #cccccc;
+      @apply border-b border-b-[#cccccc];
     }
 
-    @apply block;
-    margin-bottom: 10px;
-
     @media (min-width: 768px) {
-      margin-bottom: 0;
+      @apply mb-0;
       display: table-row;
     }
   }
 
   td {
-    padding: 4px 12px;
-    border-right: none;
-    @apply grid text-left;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-bottom: 1px solid #f2f2f2;
+    @apply py-1 px-3 border-r-0 grid grid-cols-2 text-left border-b border-solid border-b-gray-100;
     &::before {
       content: attr(data-th);
       @apply font-bold;
     }
     &:last-child {
-      border-bottom: none;
+      @apply border-b-0;
     }
     @media (min-width: 768px) {
       display: table-cell;
-      padding: 14px 22px;
+      @apply py-3.5 px-[22px];
       text-align: unset;
       &::before {
         content: none;
       }
-      border-right: 1px solid #cccccc;
-      border-bottom: none;
+      @apply border-r border-r-[#cccccc] border-b-0;
       &:last-child {
-        border-right: none;
+        @apply border-r-0;
       }
     }
   }
@@ -333,17 +291,12 @@
   tt {
     font-family:
       "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 90%;
-    margin: 0 2px;
-    padding: 2px 6px;
-    white-space: normal;
-    background-color: rgba(70, 94, 105, 0.05);
-    border-radius: 3px;
+    @apply text-[90%] mx-0.5 py-0.5 px-1.5 whitespace-normal bg-[rgba(70,94,105,0.05)] rounded-[3px];
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
   }
 
   a code {
-    color: #1a6bac;
+    @apply text-[#1a6bac];
   }
   a {
     text-decoration: underline;
@@ -351,57 +304,40 @@
     text-decoration-thickness: 1px;
   }
   pre {
-    background-color: #2d3748;
-    color: #e2e8f0;
-    padding: 1rem;
-    padding-right: 3.5rem;
-    border-radius: 3px;
+    @apply bg-[#2d3748] text-[#e2e8f0] p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-    font-size: 0.875rem;
-    line-height: 1.5;
-    @apply overflow-auto;
 
     code {
-      margin: 0;
-      padding: 0;
-      white-space: pre;
-      @apply border-none;
-      background: transparent;
-      text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);
-      color: #a5cee1;
+      @apply m-0 p-0 whitespace-pre border-none bg-transparent text-[#a5cee1];
       font-family: monospace;
+      text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);
 
       .code-details-summary-span {
-        margin-left: -15px;
-        @apply cursor-pointer;
+        @apply -ml-[15px] cursor-pointer;
 
         &::after {
           content: "›";
-          @apply float-left relative;
-          left: -2px;
-          text-align: center;
-          color: #1e78c2;
-          font-size: 16px;
+          @apply float-left relative -left-0.5 text-center text-[#1e78c2] text-base;
         }
       }
 
       a {
-        border-bottom: 1px dotted #175d96;
+        border-bottom: 1px dotted;
+        @apply border-b-[#175d96];
       }
 
       .code-link {
         @apply relative;
 
         &:hover {
-          color: #2186d8;
+          @apply text-[#2186d8];
         }
       }
     }
 
     code,
     tt {
-      background-color: transparent;
-      @apply border-none;
+      @apply bg-transparent border-none;
     }
   }
 
@@ -417,20 +353,20 @@
   span {
     code,
     tt {
-      white-space: pre-line;
+      @apply whitespace-pre-line;
     }
   }
 
   h2 {
-    margin-top: 2em;
+    @apply mt-[2em];
   }
   h2:first-child {
-    margin-top: 1em;
+    @apply mt-[1em];
   }
   h2 + h3 {
-    margin-top: 0.5em;
+    @apply mt-[0.5em];
   }
   h3 {
-    margin-top: 1.5em;
+    @apply mt-[1.5em];
   }
 }

From 2abec0a48206e933aadfb5b04a414c9d9403ce65 Mon Sep 17 00:00:00 2001
From: Sujal Goel <goelsujal9@gmail.com>
Date: Fri, 3 Apr 2026 04:54:38 +0530
Subject: [PATCH 3/3] refactor(Markdown): use Tailwind text scale for heading
 sizes

---
 src/components/Markdown/Markdown.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 496308ca3693..9cbe7e55ce46 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -15,22 +15,22 @@
   @apply leading-normal;
 
   h1 {
-    @apply text-[33.178px];
+    @apply text-4xl;
   }
   h2 {
-    @apply text-[27.648px];
+    @apply text-3xl;
   }
   h3 {
-    @apply text-[23.04px];
+    @apply text-2xl;
   }
   h4 {
-    @apply text-[19.2px];
+    @apply text-xl;
   }
   h5 {
     @apply text-base;
   }
   h6 {
-    @apply text-[13.331px];
+    @apply text-sm;
   }
 
   h2,