diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
new file mode 100644
index 000000000000..9cbe7e55ce46
--- /dev/null
+++ b/src/components/Markdown/Markdown.css
@@ -0,0 +1,372 @@
+@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 {
+  @apply leading-normal;
+
+  h1 {
+    @apply text-4xl;
+  }
+  h2 {
+    @apply text-3xl;
+  }
+  h3 {
+    @apply text-2xl;
+  }
+  h4 {
+    @apply text-xl;
+  }
+  h5 {
+    @apply text-base;
+  }
+  h6 {
+    @apply text-sm;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > span[id] {
+      @apply absolute w-0 block invisible pointer-events-none pt-14 -mt-14;
+      @media (min-width: 768px) {
+        @apply pt-[94px] -mt-[94px];
+      }
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply block font-semibold text-[#32434a] leading-[1.4];
+    font-family:
+      "Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
+      serif;
+    margin: 0 0 0.25em;
+    word-break: break-word;
+
+    tt,
+    code {
+      font-size: 90%;
+      color: inherit;
+    }
+
+    a[aria-hidden="true"] {
+      @apply ml-2 text-[0.8em] h-[1em] opacity-0 invisible;
+      transition: all 250ms;
+    }
+
+    &:hover a[aria-hidden="true"] {
+      @apply opacity-100 visible;
+    }
+  }
+
+  h1:first-child {
+    margin: 0;
+    @apply leading-none;
+  }
+
+  p,
+  blockquote,
+  aside,
+  table,
+  pre {
+    @apply my-[1em];
+  }
+
+  ul,
+  ol,
+  dl {
+    @apply mt-[0.5em] mb-[1em];
+  }
+
+  li {
+    @apply my-[0.5em];
+  }
+
+  hr {
+    @apply border-none bg-gray-200 h-[3px] my-[2em];
+  }
+
+  ul,
+  ol {
+    @apply pl-[30px];
+    list-style: revert;
+
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  dl {
+    dt {
+      @apply text-base font-bold italic mt-[15px] mb-[5px];
+
+      &:first-child {
+        padding: 0;
+      }
+    }
+
+    dd {
+      @apply mb-[15px] px-[15px];
+    }
+
+    dt,
+    dd {
+      > :first-child {
+        margin-top: 0;
+      }
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  aside {
+    @apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500;
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+    &.tip,
+    &.warning,
+    &.preview,
+    &.todo {
+      @apply border-l-[3px];
+
+      .tip-content {
+        @apply italic;
+      }
+
+      code {
+        color: inherit;
+      }
+
+      > .tip__prefix,
+      > .warning__prefix,
+      > .preview__prefix,
+      > .todo__prefix {
+        @apply capitalize font-semibold block text-base text-[#1a1a1a] mb-[0.25em];
+      }
+    }
+
+    &.tip {
+      @apply bg-[#eaf8ff] text-[#4e7182] border-l-[#1eb4ff];
+    }
+
+    &.warning {
+      @apply bg-[#fdf5d8] text-[#716b53] border-l-[#f3c316];
+    }
+
+    &.preview {
+      @apply bg-gray-100 text-[#716b53] border-l-[#1e72b3];
+    }
+
+    &.todo {
+      @apply bg-[#fbddcd] text-[#907a6e] border-l-[#e95d13];
+
+      .tip-content::before {
+        content: "[TODO]: ";
+        font-style: normal;
+      }
+    }
+  }
+
+  blockquote {
+    @apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500 italic;
+
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  table {
+    @apply my-[1em];
+
+    @media (min-width: 768px) {
+      @apply block overflow-x-auto overflow-y-hidden;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    code {
+      padding-top: 0;
+    }
+  }
+
+  thead {
+    @apply hidden;
+    @media (min-width: 768px) {
+      display: table-header-group;
+    }
+  }
+
+  th {
+    @apply font-bold text-left py-1.5 px-3 bg-[#f1f4f4] border-r border-solid border-r-[#cccccc];
+
+    &:last-child {
+      @apply border-r-0;
+    }
+  }
+
+  tr {
+    @apply border border-solid border-[#cccccc] block mb-2.5;
+
+    &:nth-child(2n) {
+      @apply bg-[#f8f8f8];
+    }
+
+    &:last-child {
+      @apply border-b border-b-[#cccccc];
+    }
+
+    @media (min-width: 768px) {
+      @apply mb-0;
+      display: table-row;
+    }
+  }
+
+  td {
+    @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 {
+      @apply border-b-0;
+    }
+    @media (min-width: 768px) {
+      display: table-cell;
+      @apply py-3.5 px-[22px];
+      text-align: unset;
+      &::before {
+        content: none;
+      }
+      @apply border-r border-r-[#cccccc] border-b-0;
+      &:last-child {
+        @apply border-r-0;
+      }
+    }
+  }
+
+  img:not([class*="support__"]) {
+    @apply max-w-full h-auto;
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
+
+  i,
+  em {
+    @apply italic;
+  }
+
+  code,
+  tt {
+    font-family:
+      "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    @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 {
+    @apply text-[#1a6bac];
+  }
+  a {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+  }
+  pre {
+    @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);
+
+    code {
+      @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 {
+        @apply -ml-[15px] cursor-pointer;
+
+        &::after {
+          content: "›";
+          @apply float-left relative -left-0.5 text-center text-[#1e78c2] text-base;
+        }
+      }
+
+      a {
+        border-bottom: 1px dotted;
+        @apply border-b-[#175d96];
+      }
+
+      .code-link {
+        @apply relative;
+
+        &:hover {
+          @apply text-[#2186d8];
+        }
+      }
+    }
+
+    code,
+    tt {
+      @apply bg-transparent border-none;
+    }
+  }
+
+  p {
+    code,
+    tt {
+      @apply max-w-full overflow-auto;
+      line-height: initial;
+      margin: 0;
+    }
+  }
+
+  span {
+    code,
+    tt {
+      @apply whitespace-pre-line;
+    }
+  }
+
+  h2 {
+    @apply mt-[2em];
+  }
+  h2:first-child {
+    @apply mt-[1em];
+  }
+  h2 + h3 {
+    @apply mt-[0.5em];
+  }
+  h3 {
+    @apply mt-[1.5em];
+  }
+}
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/Markdown.scss b/src/components/Markdown/Markdown.scss
deleted file mode 100644
index c7b53198f61f..000000000000
--- a/src/components/Markdown/Markdown.scss
+++ /dev/null
@@ -1,459 +0,0 @@
-@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;
-
-.markdown {
-  line-height: 1.5em;
-
-  h1 {
-    font-size: getFontSize(4);
-  }
-  h2 {
-    font-size: getFontSize(3);
-  }
-  h3 {
-    font-size: getFontSize(2);
-  }
-  h4 {
-    font-size: getFontSize(1);
-  }
-  h5 {
-    font-size: getFontSize(0);
-  }
-  h6 {
-    font-size: getFontSize(-1);
-  }
-
-  h2,
-  h3,
-  h4,
-  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};
-      }
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    display: block;
-    font-family: $font-stack-heading;
-    font-weight: 600;
-    line-height: 1.4;
-    margin: 0 0 0.25em;
-    color: color.adjust(getColor(fiord), $lightness: -10%);
-    word-break: break-word;
-
-    tt,
-    code {
-      font-size: 90%;
-      color: inherit;
-    }
-
-    a[aria-hidden="true"] {
-      margin-left: 8px;
-      font-size: 0.8em;
-      height: 1em;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 250ms;
-    }
-
-    &:hover a[aria-hidden="true"] {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  h1:first-child {
-    margin: 0;
-    line-height: 1;
-  }
-
-  p,
-  blockquote,
-  aside,
-  table,
-  pre {
-    margin: 1em 0;
-  }
-
-  ul,
-  ol,
-  dl {
-    margin: 0.5em 0 1em;
-  }
-
-  li {
-    margin: 0.5em 0;
-  }
-
-  hr {
-    border: none;
-    background-color: getColor(alto);
-    height: 3px;
-    margin: 2em 0;
-  }
-
-  ul,
-  ol {
-    padding-left: 30px;
-    list-style: revert;
-
-    &:first-child {
-      margin-top: 0;
-    }
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  dl {
-    dt {
-      font-size: getFontSize(0);
-      font-weight: bold;
-      font-style: italic;
-      margin: 15px 0 5px;
-
-      &:first-child {
-        padding: 0;
-      }
-    }
-
-    dd {
-      margin: 0 0 15px;
-      padding: 0 15px;
-    }
-
-    dt,
-    dd {
-      > :first-child {
-        margin-top: 0;
-      }
-      > :last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  aside {
-    border-left: 4px solid #dddddd;
-    padding: 0.75em 1em;
-    color: getColor(dove-grey);
-    > :first-child {
-      margin-top: 0;
-    }
-    > :last-child {
-      margin-bottom: 0;
-    }
-    &.tip,
-    &.warning,
-    &.preview,
-    &.todo {
-      border-left-width: 3px;
-      border-left-style: solid;
-
-      .tip-content {
-        font-style: italic;
-      }
-
-      code {
-        color: inherit;
-      }
-
-      > .tip__prefix,
-      > .warning__prefix,
-      > .preview__prefix,
-      > .todo__prefix {
-        text-transform: capitalize;
-        font-weight: 600; // slightly bold but not heading-level
-        color: #1a1a1a;
-        font-size: getFontSize(0);
-        display: block;
-        margin-bottom: 0.25em;
-        color: #1a1a1a;
-      }
-    }
-
-    &.tip {
-      background-color: #eaf8ff;
-      color: #4e7182;
-      border-left-color: color.adjust(#eaf8ff, $lightness: -40%);
-    }
-
-    &.warning {
-      background-color: #fdf5d8;
-      color: #716b53;
-      border-left-color: color.adjust(#fdf5d8, $lightness: -40%);
-    }
-
-    &.preview {
-      background-color: getColor(concrete);
-      color: #716b53;
-      border-left-color: #1e72b3;
-    }
-
-    &.todo {
-      background-color: #fbddcd;
-      color: #907a6e;
-      border-left-color: color.adjust(#fbddcd, $lightness: -40%);
-
-      .tip-content::before {
-        content: "[TODO]: ";
-        font-style: normal;
-      }
-    }
-  }
-
-  blockquote {
-    border-left: 4px solid #dddddd;
-    padding: 0.75em 1em;
-    color: getColor(dove-grey);
-    font-style: italic;
-
-    > :first-child {
-      margin-top: 0;
-    }
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  table {
-    margin: 1em 0;
-
-    @include break {
-      display: block;
-      overflow-x: auto;
-      overflow-y: hidden;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    code {
-      padding-top: 0;
-    }
-  }
-
-  thead {
-    display: none;
-    @include break {
-      display: table-header-group;
-    }
-  }
-
-  th {
-    font-weight: bold;
-    text-align: left;
-    padding: 6px 12px;
-    background: color.adjust(#f4f6f6, $lightness: -1%);
-    border-right: 1px solid #cccccc;
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  tr {
-    border: 1px solid #cccccc;
-
-    &:nth-child(2n) {
-      background-color: #f8f8f8;
-    }
-
-    &:last-child {
-      border-bottom: 1px solid #cccccc;
-    }
-
-    display: block;
-    margin-bottom: 10px;
-
-    @include break {
-      margin-bottom: 0;
-      display: table-row;
-    }
-  }
-
-  td {
-    padding: 4px 12px;
-    border-right: none;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-bottom: 1px solid getColor(concrete);
-    text-align: left;
-    &::before {
-      content: attr(data-th);
-      font-weight: bold;
-    }
-    &:last-child {
-      border-bottom: none;
-    }
-    @include break {
-      display: table-cell;
-      padding: 14px 22px;
-      text-align: unset;
-      &::before {
-        content: none;
-      }
-      border-right: 1px solid #cccccc;
-      border-bottom: none;
-      &:last-child {
-        border-right: none;
-      }
-    }
-  }
-
-  img:not([class*="support__"]) {
-    max-width: 100%;
-    height: auto;
-  }
-
-  b,
-  strong {
-    font-weight: 600;
-  }
-
-  i,
-  em {
-    font-style: italic;
-  }
-
-  code,
-  tt {
-    font-family: $font-stack-code;
-    font-size: 90%;
-    margin: 0 2px;
-    padding: 2px 6px;
-    white-space: normal;
-    background-color: color.adjust(getColor(fiord), $alpha: -0.95);
-    border-radius: 3px;
-    text-shadow: 0 1px 0 color.adjust(getColor(white), $alpha: -0.4);
-  }
-
-  a code {
-    color: $text-color-highlight;
-  }
-  a {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    text-decoration-thickness: 1px;
-  }
-  pre {
-    background-color: #2d3748;
-    color: #e2e8f0;
-    padding: 1rem;
-    padding-right: 3.5rem;
-    border-radius: 3px;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-    font-size: 0.875rem;
-    line-height: 1.5;
-    overflow: auto;
-
-    code {
-      margin: 0;
-      padding: 0;
-      white-space: pre;
-      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%);
-      font-family: monospace;
-
-      .code-details-summary-span {
-        margin-left: -15px;
-        cursor: pointer;
-
-        &::after {
-          content: "›";
-          float: left;
-          position: relative;
-          left: -2px;
-          text-align: center;
-          color: color.adjust(getColor(denim), $lightness: 10%);
-          font-size: 16px;
-        }
-      }
-
-      a {
-        border-bottom: 1px dotted getColor(denim);
-      }
-
-      .code-link {
-        position: relative;
-
-        &:hover {
-          color: color.adjust(getColor(denim), $lightness: 15%);
-        }
-      }
-    }
-
-    code,
-    tt {
-      background-color: transparent;
-      border: none;
-    }
-  }
-
-  p {
-    code,
-    tt {
-      max-width: 100%;
-      line-height: initial;
-      overflow: auto;
-      margin: 0;
-    }
-  }
-
-  span {
-    code,
-    tt {
-      white-space: pre-line;
-    }
-  }
-
-  h2 {
-    margin-top: 2em;
-  }
-  h2:first-child {
-    margin-top: 1em;
-  }
-  h2 + h3 {
-    margin-top: 0.5em;
-  }
-  h3 {
-    margin-top: 1.5em;
-  }
-}
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,