From 5c7303bee7db6be24612541530e526fd77caf905 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Tue, 20 Feb 2024 17:59:31 -0500
Subject: [PATCH] feat: add `hx-` prefix to Hextra Tailwind CSS classes (#300)

* feat: add prefix to tailwind css classes

* fix: remove unnecessary prefixes

* fix: add missing prefix in other places

* chore: regenerate hugo_stats.json

* chore: run `npm run build:css`

* chore: add `hx-` prefix to _index.fa.md

* fix: lang switcher display issue

* fix: add `hx-` prefix to showcase/index.fa.md

* fix: lang switch param mistake
---
 assets/css/compiled/main.css                  | 1006 ++++++++---------
 assets/css/components/code-copy.css           |    2 +-
 assets/css/components/navbar.css              |   12 +-
 assets/css/components/scrollbar.css           |    8 +-
 assets/css/components/search.css              |   20 +-
 assets/css/components/sidebar.css             |    8 +-
 assets/css/components/steps.css               |    8 +-
 assets/css/highlight.css                      |   24 +-
 assets/css/styles.css                         |    4 +-
 assets/css/typography.css                     |   72 +-
 assets/js/back-to-top.js                      |    4 +-
 assets/js/flexsearch.js                       |    6 +-
 assets/js/lang.js                             |    4 +-
 assets/js/menu.js                             |   18 +-
 exampleSite/content/_index.fa.md              |   26 +-
 exampleSite/content/_index.md                 |   26 +-
 exampleSite/content/_index.zh-cn.md           |   26 +-
 exampleSite/content/showcase/index.fa.md      |    4 +-
 exampleSite/content/showcase/index.md         |    4 +-
 exampleSite/content/showcase/index.zh-cn.md   |    4 +-
 exampleSite/hugo_stats.json                   |  978 ++++++++--------
 .../_markup/render-codeblock-mermaid.html     |    2 +-
 .../_default/_markup/render-codeblock.html    |   10 +-
 layouts/_default/_markup/render-heading.html  |    2 +-
 layouts/_default/list.html                    |    8 +-
 layouts/_default/single.html                  |   14 +-
 layouts/_default/wide.html                    |    8 +-
 layouts/blog/list.html                        |   28 +-
 layouts/blog/single.html                      |   24 +-
 layouts/docs/list.html                        |    6 +-
 layouts/docs/single.html                      |    6 +-
 layouts/hextra-home.html                      |    6 +-
 layouts/index.html                            |    8 +-
 layouts/partials/breadcrumb.html              |    8 +-
 layouts/partials/components/last-updated.html |    6 +-
 layouts/partials/components/pager.html        |   10 +-
 layouts/partials/footer.html                  |   22 +-
 layouts/partials/head.html                    |    2 +-
 layouts/partials/language-switch.html         |   14 +-
 layouts/partials/navbar.html                  |   30 +-
 layouts/partials/search.html                  |   10 +-
 layouts/partials/sidebar.html                 |   48 +-
 layouts/partials/theme-toggle.html            |   12 +-
 layouts/partials/toc.html                     |   22 +-
 layouts/partials/utils/page-width.html        |    6 +-
 layouts/shortcodes/callout.html               |   20 +-
 layouts/shortcodes/card.html                  |   14 +-
 layouts/shortcodes/cards.html                 |    2 +-
 layouts/shortcodes/details.html               |    8 +-
 layouts/shortcodes/filetree/container.html    |    4 +-
 layouts/shortcodes/filetree/file.html         |    6 +-
 layouts/shortcodes/filetree/folder.html       |   12 +-
 layouts/shortcodes/hextra/feature-card.html   |   12 +-
 layouts/shortcodes/hextra/feature-grid.html   |    2 +-
 layouts/shortcodes/hextra/hero-badge.html     |    2 +-
 layouts/shortcodes/hextra/hero-button.html    |    2 +-
 layouts/shortcodes/hextra/hero-headline.html  |    2 +-
 layouts/shortcodes/hextra/hero-subtitle.html  |    2 +-
 layouts/shortcodes/icon.html                  |    2 +-
 layouts/shortcodes/steps.html                 |    2 +-
 layouts/shortcodes/tab.html                   |    2 +-
 layouts/shortcodes/tabs.html                  |    4 +-
 tailwind.config.js                            |    1 +
 63 files changed, 1335 insertions(+), 1340 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 48aef6db..13d4db61 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -485,7 +485,7 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-.sr-only {
+.hx-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -496,923 +496,917 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
-.pointer-events-none {
+.hx-pointer-events-none {
   pointer-events: none;
 }
-.fixed {
+.hx-fixed {
   position: fixed;
 }
-.absolute {
+.hx-absolute {
   position: absolute;
 }
-.relative {
+.hx-relative {
   position: relative;
 }
-.sticky {
+.hx-sticky {
   position: sticky;
 }
-.inset-0 {
+.hx-inset-0 {
   inset: 0px;
 }
-.inset-x-0 {
+.hx-inset-x-0 {
   left: 0px;
   right: 0px;
 }
-.inset-y-0 {
+.hx-inset-y-0 {
   top: 0px;
   bottom: 0px;
 }
-.bottom-0 {
+.hx-bottom-0 {
   bottom: 0px;
 }
-.left-\[24px\] {
+.hx-left-\[24px\] {
   left: 24px;
 }
-.left-\[36px\] {
+.hx-left-\[36px\] {
   left: 36px;
 }
-.right-0 {
+.hx-right-0 {
   right: 0px;
 }
-.top-0 {
+.hx-top-0 {
   top: 0px;
 }
-.top-16 {
+.hx-top-16 {
   top: 4rem;
 }
-.top-8 {
+.hx-top-8 {
   top: 2rem;
 }
-.top-\[40\%\] {
+.hx-top-\[40\%\] {
   top: 40%;
 }
-.top-full {
+.hx-top-full {
   top: 100%;
 }
-.z-10 {
+.hx-z-10 {
   z-index: 10;
 }
-.z-20 {
+.hx-z-20 {
   z-index: 20;
 }
-.z-\[-1\] {
+.hx-z-\[-1\] {
   z-index: -1;
 }
-.order-last {
+.hx-order-last {
   order: 9999;
 }
-.m-\[11px\] {
+.hx-m-\[11px\] {
   margin: 11px;
 }
-.mx-1 {
+.hx-mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
-.mx-2 {
+.hx-mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.mx-4 {
+.hx-mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
 }
-.mx-auto {
+.hx-mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.my-1 {
+.hx-my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
-.my-1\.5 {
+.hx-my-1\.5 {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;
 }
-.my-2 {
+.hx-my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.-mb-0 {
+.-hx-mb-0 {
   margin-bottom: -0px;
 }
-.-mb-0\.5 {
+.-hx-mb-0\.5 {
   margin-bottom: -0.125rem;
 }
-.-ml-2 {
+.-hx-ml-2 {
   margin-left: -0.5rem;
 }
-.-mr-2 {
+.-hx-mr-2 {
   margin-right: -0.5rem;
 }
-.-mt-20 {
+.-hx-mt-20 {
   margin-top: -5rem;
 }
-.mb-10 {
+.hx-mb-10 {
   margin-bottom: 2.5rem;
 }
-.mb-12 {
+.hx-mb-12 {
   margin-bottom: 3rem;
 }
-.mb-16 {
+.hx-mb-16 {
   margin-bottom: 4rem;
 }
-.mb-2 {
+.hx-mb-2 {
   margin-bottom: 0.5rem;
 }
-.mb-4 {
+.hx-mb-4 {
   margin-bottom: 1rem;
 }
-.mb-6 {
+.hx-mb-6 {
   margin-bottom: 1.5rem;
 }
-.mb-8 {
+.hx-mb-8 {
   margin-bottom: 2rem;
 }
-.ml-1 {
+.hx-ml-1 {
   margin-left: 0.25rem;
 }
-.ml-4 {
+.hx-ml-4 {
   margin-left: 1rem;
 }
-.mr-1 {
+.hx-mr-1 {
   margin-right: 0.25rem;
 }
-.mr-2 {
+.hx-mr-2 {
   margin-right: 0.5rem;
 }
-.mt-1 {
+.hx-mt-1 {
   margin-top: 0.25rem;
 }
-.mt-1\.5 {
+.hx-mt-1\.5 {
   margin-top: 0.375rem;
 }
-.mt-12 {
+.hx-mt-12 {
   margin-top: 3rem;
 }
-.mt-16 {
+.hx-mt-16 {
   margin-top: 4rem;
 }
-.mt-2 {
+.hx-mt-2 {
   margin-top: 0.5rem;
 }
-.mt-4 {
+.hx-mt-4 {
   margin-top: 1rem;
 }
-.mt-5 {
+.hx-mt-5 {
   margin-top: 1.25rem;
 }
-.mt-6 {
+.hx-mt-6 {
   margin-top: 1.5rem;
 }
-.mt-8 {
+.hx-mt-8 {
   margin-top: 2rem;
 }
-.line-clamp-3 {
+.hx-line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
-.block {
+.hx-block {
   display: block;
 }
-.inline-block {
+.hx-inline-block {
   display: inline-block;
 }
-.inline {
+.hx-inline {
   display: inline;
 }
-.flex {
+.hx-flex {
   display: flex;
 }
-.inline-flex {
+.hx-inline-flex {
   display: inline-flex;
 }
-.table {
-  display: table;
-}
-.grid {
+.hx-grid {
   display: grid;
 }
-.hidden {
+.hx-hidden {
   display: none;
 }
-.aspect-auto {
+.hx-aspect-auto {
   aspect-ratio: auto;
 }
-.h-0 {
+.hx-h-0 {
   height: 0px;
 }
-.h-16 {
+.hx-h-16 {
   height: 4rem;
 }
-.h-2 {
+.hx-h-2 {
   height: 0.5rem;
 }
-.h-3 {
+.hx-h-3 {
   height: 0.75rem;
 }
-.h-3\.5 {
+.hx-h-3\.5 {
   height: 0.875rem;
 }
-.h-4 {
+.hx-h-4 {
   height: 1rem;
 }
-.h-5 {
+.hx-h-5 {
   height: 1.25rem;
 }
-.h-7 {
+.hx-h-7 {
   height: 1.75rem;
 }
-.h-\[18px\] {
+.hx-h-\[18px\] {
   height: 18px;
 }
-.h-full {
+.hx-h-full {
   height: 100%;
 }
-.max-h-64 {
+.hx-max-h-64 {
   max-height: 16rem;
 }
-.max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] {
+.hx-max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] {
   max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom));
 }
-.max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
+.hx-max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\,400px\)\] {
   max-height: min(calc(50vh - 11rem - env(safe-area-inset-bottom)),400px);
 }
-.min-h-\[100px\] {
+.hx-min-h-\[100px\] {
   min-height: 100px;
 }
-.min-h-\[calc\(100vh-var\(--navbar-height\)\)\] {
+.hx-min-h-\[calc\(100vh-var\(--navbar-height\)\)\] {
   min-height: calc(100vh - var(--navbar-height));
 }
-.w-2 {
+.hx-w-2 {
   width: 0.5rem;
 }
-.w-3 {
+.hx-w-3 {
   width: 0.75rem;
 }
-.w-3\.5 {
+.hx-w-3\.5 {
   width: 0.875rem;
 }
-.w-4 {
+.hx-w-4 {
   width: 1rem;
 }
-.w-64 {
+.hx-w-64 {
   width: 16rem;
 }
-.w-\[110\%\] {
+.hx-w-\[110\%\] {
   width: 110%;
 }
-.w-\[180\%\] {
+.hx-w-\[180\%\] {
   width: 180%;
 }
-.w-full {
+.hx-w-full {
   width: 100%;
 }
-.w-max {
+.hx-w-max {
   width: -moz-max-content;
   width: max-content;
 }
-.w-screen {
+.hx-w-screen {
   width: 100vw;
 }
-.min-w-0 {
+.hx-min-w-0 {
   min-width: 0px;
 }
-.min-w-\[18px\] {
+.hx-min-w-\[18px\] {
   min-width: 18px;
 }
-.min-w-\[24px\] {
+.hx-min-w-\[24px\] {
   min-width: 24px;
 }
-.min-w-full {
+.hx-min-w-full {
   min-width: 100%;
 }
-.max-w-6xl {
+.hx-max-w-6xl {
   max-width: 72rem;
 }
-.max-w-\[50\%\] {
+.hx-max-w-\[50\%\] {
   max-width: 50%;
 }
-.max-w-\[90rem\] {
+.hx-max-w-\[90rem\] {
   max-width: 90rem;
 }
-.max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] {
+.hx-max-w-\[min\(calc\(100vw-2rem\)\,calc\(100\%\+20rem\)\)\] {
   max-width: min(calc(100vw - 2rem),calc(100% + 20rem));
 }
-.max-w-full {
-  max-width: 100%;
-}
-.max-w-none {
+.hx-max-w-none {
   max-width: none;
 }
-.max-w-screen-xl {
+.hx-max-w-screen-xl {
   max-width: 1280px;
 }
-.shrink-0 {
+.hx-shrink-0 {
   flex-shrink: 0;
 }
-.grow {
+.hx-grow {
   flex-grow: 1;
 }
-.origin-center {
+.hx-origin-center {
   transform-origin: center;
 }
-.cursor-default {
+.hx-cursor-default {
   cursor: default;
 }
-.cursor-pointer {
+.hx-cursor-pointer {
   cursor: pointer;
 }
-.select-none {
+.hx-select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-.scroll-my-6 {
+.hx-scroll-my-6 {
   scroll-margin-top: 1.5rem;
   scroll-margin-bottom: 1.5rem;
 }
-.scroll-py-6 {
+.hx-scroll-py-6 {
   scroll-padding-top: 1.5rem;
   scroll-padding-bottom: 1.5rem;
 }
-.list-none {
+.hx-list-none {
   list-style-type: none;
 }
-.appearance-none {
+.hx-appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }
-.grid-cols-1 {
+.hx-grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
-.flex-col {
+.hx-flex-col {
   flex-direction: column;
 }
-.flex-wrap {
+.hx-flex-wrap {
   flex-wrap: wrap;
 }
-.items-start {
+.hx-items-start {
   align-items: flex-start;
 }
-.items-center {
+.hx-items-center {
   align-items: center;
 }
-.justify-start {
+.hx-justify-start {
   justify-content: flex-start;
 }
-.justify-end {
+.hx-justify-end {
   justify-content: flex-end;
 }
-.justify-center {
+.hx-justify-center {
   justify-content: center;
 }
-.justify-between {
+.hx-justify-between {
   justify-content: space-between;
 }
-.justify-items-start {
+.hx-justify-items-start {
   justify-items: start;
 }
-.gap-1 {
+.hx-gap-1 {
   gap: 0.25rem;
 }
-.gap-2 {
+.hx-gap-2 {
   gap: 0.5rem;
 }
-.gap-4 {
+.hx-gap-4 {
   gap: 1rem;
 }
-.gap-x-1 {
+.hx-gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
-.gap-x-1\.5 {
+.hx-gap-x-1\.5 {
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
 }
-.gap-y-2 {
+.hx-gap-y-2 {
   row-gap: 0.5rem;
 }
-.overflow-auto {
+.hx-overflow-auto {
   overflow: auto;
 }
-.overflow-hidden {
+.hx-overflow-hidden {
   overflow: hidden;
 }
-.overflow-x-auto {
+.hx-overflow-x-auto {
   overflow-x: auto;
 }
-.overflow-y-auto {
+.hx-overflow-y-auto {
   overflow-y: auto;
 }
-.overflow-x-hidden {
+.hx-overflow-x-hidden {
   overflow-x: hidden;
 }
-.overscroll-contain {
+.hx-overscroll-contain {
   overscroll-behavior: contain;
 }
-.text-ellipsis {
+.hx-text-ellipsis {
   text-overflow: ellipsis;
 }
-.whitespace-nowrap {
+.hx-whitespace-nowrap {
   white-space: nowrap;
 }
-.break-words {
+.hx-break-words {
   overflow-wrap: break-word;
 }
-.rounded {
+.hx-rounded {
   border-radius: 0.25rem;
 }
-.rounded-3xl {
+.hx-rounded-3xl {
   border-radius: 1.5rem;
 }
-.rounded-full {
+.hx-rounded-full {
   border-radius: 9999px;
 }
-.rounded-lg {
+.hx-rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-md {
+.hx-rounded-md {
   border-radius: 0.375rem;
 }
-.rounded-sm {
+.hx-rounded-sm {
   border-radius: 0.125rem;
 }
-.rounded-xl {
+.hx-rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded-t {
+.hx-rounded-t {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
 }
-.border {
+.hx-border {
   border-width: 1px;
 }
-.border-b {
+.hx-border-b {
   border-bottom-width: 1px;
 }
-.border-b-2 {
+.hx-border-b-2 {
   border-bottom-width: 2px;
 }
-.border-l {
+.hx-border-l {
   border-left-width: 1px;
 }
-.border-t {
+.hx-border-t {
   border-top-width: 1px;
 }
-.border-black\/5 {
+.hx-border-black\/5 {
   border-color: rgb(0 0 0 / 0.05);
 }
-.border-blue-200 {
+.hx-border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity));
 }
-.border-gray-200 {
+.hx-border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
-.border-gray-500 {
+.hx-border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
-.border-orange-100 {
+.hx-border-orange-100 {
   --tw-border-opacity: 1;
   border-color: rgb(255 237 213 / var(--tw-border-opacity));
 }
-.border-red-200 {
+.hx-border-red-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
-.border-transparent {
+.hx-border-transparent {
   border-color: transparent;
 }
-.border-yellow-100 {
+.hx-border-yellow-100 {
   --tw-border-opacity: 1;
   border-color: rgb(254 249 195 / var(--tw-border-opacity));
 }
-.bg-black\/80 {
+.hx-bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
-.bg-black\/\[\.05\] {
+.hx-bg-black\/\[\.05\] {
   background-color: rgb(0 0 0 / .05);
 }
-.bg-blue-100 {
+.hx-bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
-.bg-gray-100 {
+.hx-bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-.bg-neutral-50 {
+.hx-bg-neutral-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
-.bg-orange-50 {
+.hx-bg-orange-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
 }
-.bg-primary-100 {
+.hx-bg-primary-100 {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity));
 }
-.bg-primary-400 {
+.hx-bg-primary-400 {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / var(--tw-bg-opacity));
 }
-.bg-primary-600 {
+.hx-bg-primary-600 {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
-.bg-primary-700\/5 {
+.hx-bg-primary-700\/5 {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05);
 }
-.bg-red-100 {
+.hx-bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
-.bg-transparent {
+.hx-bg-transparent {
   background-color: transparent;
 }
-.bg-white {
+.hx-bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.bg-yellow-50 {
+.hx-bg-yellow-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
-.bg-gradient-to-r {
+.hx-bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
-.from-gray-900 {
+.hx-from-gray-900 {
   --tw-gradient-from: #111827 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.to-gray-600 {
+.hx-to-gray-600 {
   --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);
 }
-.bg-clip-text {
+.hx-bg-clip-text {
   -webkit-background-clip: text;
           background-clip: text;
 }
-.p-0 {
+.hx-p-0 {
   padding: 0px;
 }
-.p-0\.5 {
+.hx-p-0\.5 {
   padding: 0.125rem;
 }
-.p-1 {
+.hx-p-1 {
   padding: 0.25rem;
 }
-.p-1\.5 {
+.hx-p-1\.5 {
   padding: 0.375rem;
 }
-.p-2 {
+.hx-p-2 {
   padding: 0.5rem;
 }
-.p-4 {
+.hx-p-4 {
   padding: 1rem;
 }
-.p-6 {
+.hx-p-6 {
   padding: 1.5rem;
 }
-.px-1 {
+.hx-px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-.px-1\.5 {
+.hx-px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
-.px-2 {
+.hx-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-3 {
+.hx-px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
-.px-4 {
+.hx-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.px-6 {
+.hx-px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.py-1 {
+.hx-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.py-1\.5 {
+.hx-py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 }
-.py-12 {
+.hx-py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
-.py-2 {
+.hx-py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-2\.5 {
+.hx-py-2\.5 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
-.py-3 {
+.hx-py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.py-4 {
+.hx-py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.pb-8 {
+.hx-pb-8 {
   padding-bottom: 2rem;
 }
-.pb-\[env\(safe-area-inset-bottom\)\] {
+.hx-pb-\[env\(safe-area-inset-bottom\)\] {
   padding-bottom: env(safe-area-inset-bottom);
 }
-.pb-px {
+.hx-pb-px {
   padding-bottom: 1px;
 }
-.pl-5 {
+.hx-pl-5 {
   padding-left: 1.25rem;
 }
-.pl-6 {
+.hx-pl-6 {
   padding-left: 1.5rem;
 }
-.pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] {
+.hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
   padding-left: max(env(safe-area-inset-left),1.5rem);
 }
-.pr-2 {
+.hx-pr-2 {
   padding-right: 0.5rem;
 }
-.pr-4 {
+.hx-pr-4 {
   padding-right: 1rem;
 }
-.pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] {
+.hx-pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] {
   padding-right: calc(env(safe-area-inset-right) - 1.5rem);
 }
-.pr-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] {
+.hx-pr-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
   padding-right: max(env(safe-area-inset-left),1.5rem);
 }
-.pr-\[max\(env\(safe-area-inset-right\)\2c 1\.5rem\)\] {
+.hx-pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] {
   padding-right: max(env(safe-area-inset-right),1.5rem);
 }
-.pt-4 {
+.hx-pt-4 {
   padding-top: 1rem;
 }
-.pt-6 {
+.hx-pt-6 {
   padding-top: 1.5rem;
 }
-.pt-8 {
+.hx-pt-8 {
   padding-top: 2rem;
 }
-.text-left {
+.hx-text-left {
   text-align: left;
 }
-.text-center {
+.hx-text-center {
   text-align: center;
 }
-.align-text-bottom {
+.hx-align-text-bottom {
   vertical-align: text-bottom;
 }
-.align-\[-2\.5px\] {
+.hx-align-\[-2\.5px\] {
   vertical-align: -2.5px;
 }
-.font-mono {
+.hx-font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
-.text-2xl {
+.hx-text-2xl {
   font-size: 1.5rem;
 }
-.text-4xl {
+.hx-text-4xl {
   font-size: 2.25rem;
 }
-.text-\[10px\] {
+.hx-text-\[10px\] {
   font-size: 10px;
 }
-.text-base {
+.hx-text-base {
   font-size: 1rem;
 }
-.text-lg {
+.hx-text-lg {
   font-size: 1.125rem;
 }
-.text-sm {
+.hx-text-sm {
   font-size: .875rem;
 }
-.text-xl {
+.hx-text-xl {
   font-size: 1.25rem;
 }
-.text-xs {
+.hx-text-xs {
   font-size: .75rem;
 }
-.font-bold {
+.hx-font-bold {
   font-weight: 700;
 }
-.font-extrabold {
+.hx-font-extrabold {
   font-weight: 800;
 }
-.font-medium {
+.hx-font-medium {
   font-weight: 500;
 }
-.font-normal {
+.hx-font-normal {
   font-weight: 400;
 }
-.font-semibold {
+.hx-font-semibold {
   font-weight: 600;
 }
-.capitalize {
+.hx-capitalize {
   text-transform: capitalize;
 }
-.leading-5 {
+.hx-leading-5 {
   line-height: 1.25rem;
 }
-.leading-6 {
+.hx-leading-6 {
   line-height: 1.5rem;
 }
-.leading-7 {
+.hx-leading-7 {
   line-height: 1.75rem;
 }
-.leading-none {
+.hx-leading-none {
   line-height: 1;
 }
-.leading-tight {
+.hx-leading-tight {
   line-height: 1.25;
 }
-.tracking-tight {
+.hx-tracking-tight {
   letter-spacing: -0.015em;
 }
-.text-\[color\:hsl\(var\(--primary-hue\)\2c 100\%\2c 50\%\)\] {
+.hx-text-\[color\:hsl\(var\(--primary-hue\)\,100\%\,50\%\)\] {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity));
 }
-.text-blue-900 {
+.hx-text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
 }
-.text-current {
+.hx-text-current {
   color: currentColor;
 }
-.text-gray-100 {
+.hx-text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
-.text-gray-500 {
+.hx-text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.text-gray-600 {
+.hx-text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
-.text-gray-700 {
+.hx-text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.text-gray-800 {
+.hx-text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
-.text-gray-900 {
+.hx-text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.text-orange-800 {
+.hx-text-orange-800 {
   --tw-text-opacity: 1;
   color: rgb(154 52 18 / var(--tw-text-opacity));
 }
-.text-primary-800 {
+.hx-text-primary-800 {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity));
 }
-.text-red-900 {
+.hx-text-red-900 {
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
 }
-.text-slate-900 {
+.hx-text-slate-900 {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-.text-transparent {
+.hx-text-transparent {
   color: transparent;
 }
-.text-white {
+.hx-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-yellow-900 {
+.hx-text-yellow-900 {
   --tw-text-opacity: 1;
   color: rgb(113 63 18 / var(--tw-text-opacity));
 }
-.underline {
+.hx-underline {
   text-decoration-line: underline;
 }
-.no-underline {
+.hx-no-underline {
   text-decoration-line: none;
 }
-.decoration-from-font {
+.hx-decoration-from-font {
   text-decoration-thickness: from-font;
 }
-.underline-offset-2 {
+.hx-underline-offset-2 {
   text-underline-offset: 2px;
 }
-.opacity-0 {
+.hx-opacity-0 {
   opacity: 0;
 }
-.opacity-50 {
+.hx-opacity-50 {
   opacity: 0.5;
 }
-.opacity-80 {
+.hx-opacity-80 {
   opacity: 0.8;
 }
-.shadow {
+.hx-shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[0_-12px_16px_\#fff\] {
+.hx-shadow-\[0_-12px_16px_\#fff\] {
   --tw-shadow: 0 -12px 16px #fff;
   --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[0_-12px_16px_white\] {
+.hx-shadow-\[0_-12px_16px_white\] {
   --tw-shadow: 0 -12px 16px white;
   --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c \.02\)\2c 0_1px_0_rgba\(0\2c 0\2c 0\2c \.06\)\] {
+.hx-shadow-\[0_2px_4px_rgba\(0\,0\,0\,\.02\)\,0_1px_0_rgba\(0\,0\,0\,\.06\)\] {
   --tw-shadow: 0 2px 4px rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.06);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 1px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-lg {
+.hx-shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-sm {
+.hx-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-xl {
+.hx-shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-gray-100 {
+.hx-shadow-gray-100 {
   --tw-shadow-color: #f3f4f6;
   --tw-shadow: var(--tw-shadow-colored);
 }
-.ring-1 {
+.hx-ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.ring-black\/5 {
+.hx-ring-black\/5 {
   --tw-ring-color: rgb(0 0 0 / 0.05);
 }
-.transition {
+.hx-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-all {
+.hx-transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-colors {
+.hx-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity {
+.hx-transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-transform {
+.hx-transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-200 {
+.hx-duration-200 {
   transition-duration: 200ms;
 }
-.duration-75 {
+.hx-duration-75 {
   transition-duration: 75ms;
 }
-.ease-in {
+.hx-ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .\[-webkit-tap-highlight-color\:transparent\] {
@@ -1701,8 +1695,8 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
-     inside the list item (li) of any parent ul or ol. 
+/* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
+     inside the list item (li) of any parent ul or ol.
      The rule sets the top margin of the selected list to zero. */
 .content :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 0px;
@@ -1800,7 +1794,7 @@ article details > summary::-webkit-details-marker {
   display: none;
 }
 article details > summary::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
     height: 1.2em;
     width: 1.2em;
     vertical-align: -4px;
@@ -2585,776 +2579,776 @@ body {
   --primary-hue: 204deg;
   --primary-saturation: 100%;
 }
-.placeholder\:text-gray-500::-moz-placeholder {
+.placeholder\:hx-text-gray-500::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.placeholder\:text-gray-500::placeholder {
+.placeholder\:hx-text-gray-500::placeholder {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.before\:pointer-events-none::before {
+.before\:hx-pointer-events-none::before {
   content: var(--tw-content);
   pointer-events: none;
 }
-.before\:absolute::before {
+.before\:hx-absolute::before {
   content: var(--tw-content);
   position: absolute;
 }
-.before\:inset-0::before {
+.before\:hx-inset-0::before {
   content: var(--tw-content);
   inset: 0px;
 }
-.before\:inset-y-1::before {
+.before\:hx-inset-y-1::before {
   content: var(--tw-content);
   top: 0.25rem;
   bottom: 0.25rem;
 }
-.before\:mr-1::before {
+.before\:hx-mr-1::before {
   content: var(--tw-content);
   margin-right: 0.25rem;
 }
-.before\:inline-block::before {
+.before\:hx-inline-block::before {
   content: var(--tw-content);
   display: inline-block;
 }
-.before\:w-px::before {
+.before\:hx-w-px::before {
   content: var(--tw-content);
   width: 1px;
 }
-.before\:bg-gray-200::before {
+.before\:hx-bg-gray-200::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
-.before\:opacity-25::before {
+.before\:hx-opacity-25::before {
   content: var(--tw-content);
   opacity: 0.25;
 }
-.before\:transition-transform::before {
+.before\:hx-transition-transform::before {
   content: var(--tw-content);
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.before\:content-\[\'\#\'\]::before {
+.before\:hx-content-\[\'\#\'\]::before {
   --tw-content: '#';
   content: var(--tw-content);
 }
-.before\:content-\[\'\'\]::before {
+.before\:hx-content-\[\'\'\]::before {
   --tw-content: '';
   content: var(--tw-content);
 }
-.before\:content-\[\\\"\\\"\]::before {
+.before\:hx-content-\[\\\"\\\"\]::before {
   --tw-content: \"\";
   content: var(--tw-content);
 }
-.first\:mt-0:first-child {
+.first\:hx-mt-0:first-child {
   margin-top: 0px;
 }
-.last-of-type\:mb-0:last-of-type {
+.last-of-type\:hx-mb-0:last-of-type {
   margin-bottom: 0px;
 }
-.hover\:border-gray-200:hover {
+.hover\:hx-border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
-.hover\:border-gray-300:hover {
+.hover\:hx-border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
-.hover\:border-gray-400:hover {
+.hover\:hx-border-gray-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
-.hover\:border-gray-900:hover {
+.hover\:hx-border-gray-900:hover {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
-.hover\:bg-gray-100:hover {
+.hover\:hx-bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-.hover\:bg-gray-800\/5:hover {
+.hover\:hx-bg-gray-800\/5:hover {
   background-color: rgb(31 41 55 / 0.05);
 }
-.hover\:bg-primary-50:hover {
+.hover\:hx-bg-primary-50:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity));
 }
-.hover\:bg-primary-700:hover {
+.hover\:hx-bg-primary-700:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
-.hover\:bg-slate-50:hover {
+.hover\:hx-bg-slate-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
-.hover\:text-black:hover {
+.hover\:hx-text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.hover\:text-gray-800:hover {
+.hover\:hx-text-gray-800:hover {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
-.hover\:text-gray-900:hover {
+.hover\:hx-text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.hover\:text-primary-600:hover {
+.hover\:hx-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
-.hover\:opacity-60:hover {
+.hover\:hx-opacity-60:hover {
   opacity: 0.6;
 }
-.hover\:opacity-75:hover {
+.hover\:hx-opacity-75:hover {
   opacity: 0.75;
 }
-.hover\:shadow-lg:hover {
+.hover\:hx-shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.hover\:shadow-md:hover {
+.hover\:hx-shadow-md:hover {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.hover\:shadow-gray-100:hover {
+.hover\:hx-shadow-gray-100:hover {
   --tw-shadow-color: #f3f4f6;
   --tw-shadow: var(--tw-shadow-colored);
 }
-.focus\:bg-white:focus {
+.focus\:hx-bg-white:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.focus\:outline-none:focus {
+.focus\:hx-outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus\:ring-4:focus {
+.focus\:hx-ring-4:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.focus\:ring-primary-300:focus {
+.focus\:hx-ring-primary-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity));
 }
-.active\:bg-gray-400\/20:active {
+.active\:hx-bg-gray-400\/20:active {
   background-color: rgb(156 163 175 / 0.2);
 }
-.active\:opacity-50:active {
+.active\:hx-opacity-50:active {
   opacity: 0.5;
 }
-.active\:shadow-sm:active {
+.active\:hx-shadow-sm:active {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.active\:shadow-gray-200:active {
+.active\:hx-shadow-gray-200:active {
   --tw-shadow-color: #e5e7eb;
   --tw-shadow: var(--tw-shadow-colored);
 }
-.group[open] .group-open\:before\:rotate-90::before {
+.hx-group[open] .group-open\:before\:hx-rotate-90::before {
   content: var(--tw-content);
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.group:hover .group-hover\:underline {
+.hx-group:hover .group-hover\:hx-underline {
   text-decoration-line: underline;
 }
-.group\/code:hover .group-hover\/code\:opacity-100 {
+.hx-group\/code:hover .group-hover\/code\:hx-opacity-100 {
   opacity: 1;
 }
-.group\/copybtn.copied .group-\[\.copied\]\/copybtn\:block {
+.hx-group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hx-block {
   display: block;
 }
-.group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hidden {
+.hx-group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hx-hidden {
   display: none;
 }
-.data-\[state\=selected\]\:block[data-state=selected] {
+.data-\[state\=selected\]\:hx-block[data-state=selected] {
   display: block;
 }
-.data-\[state\=closed\]\:hidden[data-state=closed] {
+.data-\[state\=closed\]\:hx-hidden[data-state=closed] {
   display: none;
 }
-.data-\[state\=open\]\:hidden[data-state=open] {
+.data-\[state\=open\]\:hx-hidden[data-state=open] {
   display: none;
 }
-.data-\[state\=selected\]\:border-primary-500[data-state=selected] {
+.data-\[state\=selected\]\:hx-border-primary-500[data-state=selected] {
   --tw-border-opacity: 1;
   border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
 }
-.data-\[state\=selected\]\:text-primary-600[data-state=selected] {
+.data-\[state\=selected\]\:hx-text-primary-600[data-state=selected] {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
-.group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden {
+.hx-group[data-theme=dark] .group-data-\[theme\=dark\]\:hx-hidden {
   display: none;
 }
-.group[data-theme=light] .group-data-\[theme\=light\]\:hidden {
+.hx-group[data-theme=light] .group-data-\[theme\=light\]\:hx-hidden {
   display: none;
 }
-:is([dir="ltr"] .ltr\:right-1) {
+:is([dir="ltr"] .ltr\:hx-right-1) {
   right: 0.25rem;
 }
-:is([dir="ltr"] .ltr\:right-1\.5) {
+:is([dir="ltr"] .ltr\:hx-right-1\.5) {
   right: 0.375rem;
 }
-:is([dir="ltr"] .ltr\:right-3) {
+:is([dir="ltr"] .ltr\:hx-right-3) {
   right: 0.75rem;
 }
-:is([dir="ltr"] .ltr\:-mr-4) {
+:is([dir="ltr"] .ltr\:hx--mr-4) {
   margin-right: -1rem;
 }
-:is([dir="ltr"] .ltr\:ml-3) {
+:is([dir="ltr"] .ltr\:hx-ml-3) {
   margin-left: 0.75rem;
 }
-:is([dir="ltr"] .ltr\:ml-auto) {
+:is([dir="ltr"] .ltr\:hx-ml-auto) {
   margin-left: auto;
 }
-:is([dir="ltr"] .ltr\:mr-auto) {
+:is([dir="ltr"] .ltr\:hx-mr-auto) {
   margin-right: auto;
 }
-:is([dir="ltr"] .ltr\:rotate-180) {
+:is([dir="ltr"] .ltr\:hx-rotate-180) {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-:is([dir="ltr"] .ltr\:pl-12) {
+:is([dir="ltr"] .ltr\:hx-pl-12) {
   padding-left: 3rem;
 }
-:is([dir="ltr"] .ltr\:pl-16) {
+:is([dir="ltr"] .ltr\:hx-pl-16) {
   padding-left: 4rem;
 }
-:is([dir="ltr"] .ltr\:pl-3) {
+:is([dir="ltr"] .ltr\:hx-pl-3) {
   padding-left: 0.75rem;
 }
-:is([dir="ltr"] .ltr\:pl-4) {
+:is([dir="ltr"] .ltr\:hx-pl-4) {
   padding-left: 1rem;
 }
-:is([dir="ltr"] .ltr\:pl-8) {
+:is([dir="ltr"] .ltr\:hx-pl-8) {
   padding-left: 2rem;
 }
-:is([dir="ltr"] .ltr\:pr-0) {
+:is([dir="ltr"] .ltr\:hx-pr-0) {
   padding-right: 0px;
 }
-:is([dir="ltr"] .ltr\:pr-2) {
+:is([dir="ltr"] .ltr\:hx-pr-2) {
   padding-right: 0.5rem;
 }
-:is([dir="ltr"] .ltr\:pr-4) {
+:is([dir="ltr"] .ltr\:hx-pr-4) {
   padding-right: 1rem;
 }
-:is([dir="ltr"] .ltr\:pr-9) {
+:is([dir="ltr"] .ltr\:hx-pr-9) {
   padding-right: 2.25rem;
 }
-:is([dir="ltr"] .ltr\:text-right) {
+:is([dir="ltr"] .ltr\:hx-text-right) {
   text-align: right;
 }
-:is([dir="ltr"] .ltr\:before\:left-0)::before {
+:is([dir="ltr"] .ltr\:before\:hx-left-0)::before {
   content: var(--tw-content);
   left: 0px;
 }
-:is([dir="rtl"] .rtl\:left-1) {
+:is([dir="rtl"] .rtl\:hx-left-1) {
   left: 0.25rem;
 }
-:is([dir="rtl"] .rtl\:left-1\.5) {
+:is([dir="rtl"] .rtl\:hx-left-1\.5) {
   left: 0.375rem;
 }
-:is([dir="rtl"] .rtl\:left-3) {
+:is([dir="rtl"] .rtl\:hx-left-3) {
   left: 0.75rem;
 }
-:is([dir="rtl"] .rtl\:-ml-4) {
+:is([dir="rtl"] .rtl\:hx--ml-4) {
   margin-left: -1rem;
 }
-:is([dir="rtl"] .rtl\:ml-auto) {
+:is([dir="rtl"] .rtl\:hx-ml-auto) {
   margin-left: auto;
 }
-:is([dir="rtl"] .rtl\:mr-3) {
+:is([dir="rtl"] .rtl\:hx-mr-3) {
   margin-right: 0.75rem;
 }
-:is([dir="rtl"] .rtl\:mr-auto) {
+:is([dir="rtl"] .rtl\:hx-mr-auto) {
   margin-right: auto;
 }
-:is([dir="rtl"] .rtl\:-rotate-180) {
+:is([dir="rtl"] .rtl\:-hx-rotate-180) {
   --tw-rotate: -180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-:is([dir="rtl"] .rtl\:pl-2) {
+:is([dir="rtl"] .rtl\:hx-pl-2) {
   padding-left: 0.5rem;
 }
-:is([dir="rtl"] .rtl\:pl-4) {
+:is([dir="rtl"] .rtl\:hx-pl-4) {
   padding-left: 1rem;
 }
-:is([dir="rtl"] .rtl\:pl-9) {
+:is([dir="rtl"] .rtl\:hx-pl-9) {
   padding-left: 2.25rem;
 }
-:is([dir="rtl"] .rtl\:pr-12) {
+:is([dir="rtl"] .rtl\:hx-pr-12) {
   padding-right: 3rem;
 }
-:is([dir="rtl"] .rtl\:pr-16) {
+:is([dir="rtl"] .rtl\:hx-pr-16) {
   padding-right: 4rem;
 }
-:is([dir="rtl"] .rtl\:pr-3) {
+:is([dir="rtl"] .rtl\:hx-pr-3) {
   padding-right: 0.75rem;
 }
-:is([dir="rtl"] .rtl\:pr-4) {
+:is([dir="rtl"] .rtl\:hx-pr-4) {
   padding-right: 1rem;
 }
-:is([dir="rtl"] .rtl\:pr-8) {
+:is([dir="rtl"] .rtl\:hx-pr-8) {
   padding-right: 2rem;
 }
-:is([dir="rtl"] .rtl\:text-left) {
+:is([dir="rtl"] .rtl\:hx-text-left) {
   text-align: left;
 }
-:is([dir="rtl"] .rtl\:before\:right-0)::before {
+:is([dir="rtl"] .rtl\:before\:hx-right-0)::before {
   content: var(--tw-content);
   right: 0px;
 }
-:is([dir="rtl"] .rtl\:before\:rotate-180)::before {
+:is([dir="rtl"] .rtl\:before\:hx-rotate-180)::before {
   content: var(--tw-content);
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 @media (prefers-contrast: more) {
 
-  .contrast-more\:border {
+  .contrast-more\:hx-border {
     border-width: 1px;
   }
 
-  .contrast-more\:border-t {
+  .contrast-more\:hx-border-t {
     border-top-width: 1px;
   }
 
-  .contrast-more\:border-current {
+  .contrast-more\:hx-border-current {
     border-color: currentColor;
   }
 
-  .contrast-more\:border-gray-800 {
+  .contrast-more\:hx-border-gray-800 {
     --tw-border-opacity: 1;
     border-color: rgb(31 41 55 / var(--tw-border-opacity));
   }
 
-  .contrast-more\:border-gray-900 {
+  .contrast-more\:hx-border-gray-900 {
     --tw-border-opacity: 1;
     border-color: rgb(17 24 39 / var(--tw-border-opacity));
   }
 
-  .contrast-more\:border-neutral-400 {
+  .contrast-more\:hx-border-neutral-400 {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 
-  .contrast-more\:border-primary-500 {
+  .contrast-more\:hx-border-primary-500 {
     --tw-border-opacity: 1;
     border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
   }
 
-  .contrast-more\:border-transparent {
+  .contrast-more\:hx-border-transparent {
     border-color: transparent;
   }
 
-  .contrast-more\:font-bold {
+  .contrast-more\:hx-font-bold {
     font-weight: 700;
   }
 
-  .contrast-more\:text-current {
+  .contrast-more\:hx-text-current {
     color: currentColor;
   }
 
-  .contrast-more\:text-gray-700 {
+  .contrast-more\:hx-text-gray-700 {
     --tw-text-opacity: 1;
     color: rgb(55 65 81 / var(--tw-text-opacity));
   }
 
-  .contrast-more\:text-gray-800 {
+  .contrast-more\:hx-text-gray-800 {
     --tw-text-opacity: 1;
     color: rgb(31 41 55 / var(--tw-text-opacity));
   }
 
-  .contrast-more\:text-gray-900 {
+  .contrast-more\:hx-text-gray-900 {
     --tw-text-opacity: 1;
     color: rgb(17 24 39 / var(--tw-text-opacity));
   }
 
-  .contrast-more\:underline {
+  .contrast-more\:hx-underline {
     text-decoration-line: underline;
   }
 
-  .contrast-more\:shadow-\[0_0_0_1px_\#000\] {
+  .contrast-more\:hx-shadow-\[0_0_0_1px_\#000\] {
     --tw-shadow: 0 0 0 1px #000;
     --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
-  .contrast-more\:shadow-none {
+  .contrast-more\:hx-shadow-none {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
-  .contrast-more\:hover\:border-gray-900:hover {
+  .contrast-more\:hover\:hx-border-gray-900:hover {
     --tw-border-opacity: 1;
     border-color: rgb(17 24 39 / var(--tw-border-opacity));
   }
 }
-:is(html[class~="dark"] .dark\:block) {
+:is(html[class~="dark"] .dark\:hx-block) {
   display: block;
 }
-:is(html[class~="dark"] .dark\:hidden) {
+:is(html[class~="dark"] .dark\:hx-hidden) {
   display: none;
 }
-:is(html[class~="dark"] .dark\:border-blue-200\/30) {
+:is(html[class~="dark"] .dark\:hx-border-blue-200\/30) {
   border-color: rgb(191 219 254 / 0.3);
 }
-:is(html[class~="dark"] .dark\:border-gray-100\/20) {
+:is(html[class~="dark"] .dark\:hx-border-gray-100\/20) {
   border-color: rgb(243 244 246 / 0.2);
 }
-:is(html[class~="dark"] .dark\:border-gray-400) {
+:is(html[class~="dark"] .dark\:hx-border-gray-400) {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:border-neutral-700) {
+:is(html[class~="dark"] .dark\:hx-border-neutral-700) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:border-neutral-800) {
+:is(html[class~="dark"] .dark\:hx-border-neutral-800) {
   --tw-border-opacity: 1;
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:border-orange-400\/30) {
+:is(html[class~="dark"] .dark\:hx-border-orange-400\/30) {
   border-color: rgb(251 146 60 / 0.3);
 }
-:is(html[class~="dark"] .dark\:border-red-200\/30) {
+:is(html[class~="dark"] .dark\:hx-border-red-200\/30) {
   border-color: rgb(254 202 202 / 0.3);
 }
-:is(html[class~="dark"] .dark\:border-white\/10) {
+:is(html[class~="dark"] .dark\:hx-border-white\/10) {
   border-color: rgb(255 255 255 / 0.1);
 }
-:is(html[class~="dark"] .dark\:border-yellow-200\/30) {
+:is(html[class~="dark"] .dark\:hx-border-yellow-200\/30) {
   border-color: rgb(254 240 138 / 0.3);
 }
-:is(html[class~="dark"] .dark\:bg-black\/60) {
+:is(html[class~="dark"] .dark\:hx-bg-black\/60) {
   background-color: rgb(0 0 0 / 0.6);
 }
-:is(html[class~="dark"] .dark\:bg-blue-900\/30) {
+:is(html[class~="dark"] .dark\:hx-bg-blue-900\/30) {
   background-color: rgb(30 58 138 / 0.3);
 }
-:is(html[class~="dark"] .dark\:bg-dark) {
+:is(html[class~="dark"] .dark\:hx-bg-dark) {
   --tw-bg-opacity: 1;
   background-color: rgb(17 17 17 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:bg-dark\/50) {
+:is(html[class~="dark"] .dark\:hx-bg-dark\/50) {
   background-color: rgb(17 17 17 / 0.5);
 }
-:is(html[class~="dark"] .dark\:bg-gray-50\/10) {
+:is(html[class~="dark"] .dark\:hx-bg-gray-50\/10) {
   background-color: rgb(249 250 251 / 0.1);
 }
-:is(html[class~="dark"] .dark\:bg-neutral-800) {
+:is(html[class~="dark"] .dark\:hx-bg-neutral-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:bg-neutral-900) {
+:is(html[class~="dark"] .dark\:hx-bg-neutral-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:bg-orange-400\/20) {
+:is(html[class~="dark"] .dark\:hx-bg-orange-400\/20) {
   background-color: rgb(251 146 60 / 0.2);
 }
-:is(html[class~="dark"] .dark\:bg-primary-300\/10) {
+:is(html[class~="dark"] .dark\:hx-bg-primary-300\/10) {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
-:is(html[class~="dark"] .dark\:bg-primary-400\/10) {
+:is(html[class~="dark"] .dark\:hx-bg-primary-400\/10) {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1);
 }
-:is(html[class~="dark"] .dark\:bg-primary-600) {
+:is(html[class~="dark"] .dark\:hx-bg-primary-600) {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:bg-red-900\/30) {
+:is(html[class~="dark"] .dark\:hx-bg-red-900\/30) {
   background-color: rgb(127 29 29 / 0.3);
 }
-:is(html[class~="dark"] .dark\:bg-yellow-700\/30) {
+:is(html[class~="dark"] .dark\:hx-bg-yellow-700\/30) {
   background-color: rgb(161 98 7 / 0.3);
 }
-:is(html[class~="dark"] .dark\:from-gray-100) {
+:is(html[class~="dark"] .dark\:hx-from-gray-100) {
   --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-:is(html[class~="dark"] .dark\:to-gray-400) {
+:is(html[class~="dark"] .dark\:hx-to-gray-400) {
   --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
 }
-:is(html[class~="dark"] .dark\:text-blue-200) {
+:is(html[class~="dark"] .dark\:hx-text-blue-200) {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-gray-100) {
+:is(html[class~="dark"] .dark\:hx-text-gray-100) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-gray-200) {
+:is(html[class~="dark"] .dark\:hx-text-gray-200) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-gray-300) {
+:is(html[class~="dark"] .dark\:hx-text-gray-300) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-gray-400) {
+:is(html[class~="dark"] .dark\:hx-text-gray-400) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-gray-50) {
+:is(html[class~="dark"] .dark\:hx-text-gray-50) {
   --tw-text-opacity: 1;
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-neutral-200) {
+:is(html[class~="dark"] .dark\:hx-text-neutral-200) {
   --tw-text-opacity: 1;
   color: rgb(229 229 229 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-neutral-400) {
+:is(html[class~="dark"] .dark\:hx-text-neutral-400) {
   --tw-text-opacity: 1;
   color: rgb(163 163 163 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-orange-300) {
+:is(html[class~="dark"] .dark\:hx-text-orange-300) {
   --tw-text-opacity: 1;
   color: rgb(253 186 116 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-primary-600) {
+:is(html[class~="dark"] .dark\:hx-text-primary-600) {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-red-200) {
+:is(html[class~="dark"] .dark\:hx-text-red-200) {
   --tw-text-opacity: 1;
   color: rgb(254 202 202 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-slate-100) {
+:is(html[class~="dark"] .dark\:hx-text-slate-100) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:text-yellow-200) {
+:is(html[class~="dark"] .dark\:hx-text-yellow-200) {
   --tw-text-opacity: 1;
   color: rgb(254 240 138 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:opacity-80) {
+:is(html[class~="dark"] .dark\:hx-opacity-80) {
   opacity: 0.8;
 }
-:is(html[class~="dark"] .dark\:shadow-\[0_-12px_16px_\#111\]) {
+:is(html[class~="dark"] .dark\:hx-shadow-\[0_-12px_16px_\#111\]) {
   --tw-shadow: 0 -12px 16px #111;
   --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-:is(html[class~="dark"] .dark\:shadow-\[0_-1px_0_rgba\(255\2c 255\2c 255\2c \.1\)_inset\]) {
+:is(html[class~="dark"] .dark\:hx-shadow-\[0_-1px_0_rgba\(255\2c 255\2c 255\2c \.1\)_inset\]) {
   --tw-shadow: 0 -1px 0 rgba(255,255,255,.1) inset;
   --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-:is(html[class~="dark"] .dark\:shadow-none) {
+:is(html[class~="dark"] .dark\:hx-shadow-none) {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-:is(html[class~="dark"] .dark\:ring-white\/20) {
+:is(html[class~="dark"] .dark\:hx-ring-white\/20) {
   --tw-ring-color: rgb(255 255 255 / 0.2);
 }
-:is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::-moz-placeholder {
+:is(html[class~="dark"] .dark\:placeholder\:hx-text-gray-400)::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder {
+:is(html[class~="dark"] .dark\:placeholder\:hx-text-gray-400)::placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:before\:bg-neutral-800)::before {
+:is(html[class~="dark"] .dark\:before\:hx-bg-neutral-800)::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:before\:invert)::before {
+:is(html[class~="dark"] .dark\:before\:hx-invert)::before {
   content: var(--tw-content);
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-:is(html[class~="dark"] .dark\:hover\:border-gray-100:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-border-gray-100:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-border-gray-600:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:border-neutral-500:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-border-neutral-500:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-border-neutral-700:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:border-neutral-800:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-border-neutral-800:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:bg-gray-100\/5:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-bg-gray-100\/5:hover) {
   background-color: rgb(243 244 246 / 0.05);
 }
-:is(html[class~="dark"] .dark\:hover\:bg-neutral-700:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-bg-neutral-700:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-bg-neutral-800:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-bg-neutral-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-bg-primary-100\/5:hover) {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05);
 }
-:is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-bg-primary-700:hover) {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover {
+:is(html[class~="dark"] .hover\:dark\:hx-bg-primary-500\/10):hover {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1);
 }
-:is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-text-gray-100:hover) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:text-gray-200:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-text-gray-200:hover) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:text-gray-300:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-text-gray-300:hover) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:text-gray-50:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-text-gray-50:hover) {
   --tw-text-opacity: 1;
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:text-neutral-50:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-text-neutral-50:hover) {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:text-white:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .hover\:dark\:text-primary-600):hover {
+:is(html[class~="dark"] .hover\:dark\:hx-text-primary-600):hover {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .dark\:hover\:shadow-none:hover) {
+:is(html[class~="dark"] .dark\:hover\:hx-shadow-none:hover) {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-:is(html[class~="dark"] .dark\:focus\:bg-dark:focus) {
+:is(html[class~="dark"] .dark\:focus\:hx-bg-dark:focus) {
   --tw-bg-opacity: 1;
   background-color: rgb(17 17 17 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) {
+:is(html[class~="dark"] .dark\:focus\:hx-ring-primary-800:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity));
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .contrast-more\:dark\:border-current) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-border-current) {
     border-color: currentColor;
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:border-gray-50) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-border-gray-50) {
     --tw-border-opacity: 1;
     border-color: rgb(249 250 251 / var(--tw-border-opacity));
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:border-neutral-400) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-border-neutral-400) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-border-primary-500) {
     --tw-border-opacity: 1;
     border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
   }
 
-  :is(html[class~="dark"] .dark\:contrast-more\:border-neutral-400) {
+  :is(html[class~="dark"] .dark\:contrast-more\:hx-border-neutral-400) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:text-current) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-text-current) {
     color: currentColor;
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:text-gray-100) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-text-gray-100) {
     --tw-text-opacity: 1;
     color: rgb(243 244 246 / var(--tw-text-opacity));
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:text-gray-300) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-text-gray-300) {
     --tw-text-opacity: 1;
     color: rgb(209 213 219 / var(--tw-text-opacity));
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:text-gray-50) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-text-gray-50) {
     --tw-text-opacity: 1;
     color: rgb(249 250 251 / var(--tw-text-opacity));
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:shadow-\[0_0_0_1px_\#fff\]) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-shadow-\[0_0_0_1px_\#fff\]) {
     --tw-shadow: 0 0 0 1px #fff;
     --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:shadow-none) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hx-shadow-none) {
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
-  :is(html[class~="dark"] .contrast-more\:dark\:hover\:border-gray-50:hover) {
+  :is(html[class~="dark"] .contrast-more\:dark\:hover\:hx-border-gray-50:hover) {
     --tw-border-opacity: 1;
     border-color: rgb(249 250 251 / var(--tw-border-opacity));
   }
 }
 @media print {
 
-  .print\:hidden {
+  .print\:hx-hidden {
     display: none;
   }
 
-  .print\:bg-transparent {
+  .print\:hx-bg-transparent {
     background-color: transparent;
   }
 }
 @media not all and (min-width: 1280px) {
 
-  .max-xl\:hidden {
+  .max-xl\:hx-hidden {
     display: none;
   }
 }
 @media not all and (min-width: 1024px) {
 
-  .max-lg\:min-h-\[340px\] {
+  .max-lg\:hx-min-h-\[340px\] {
     min-height: 340px;
   }
 }
 @media not all and (min-width: 768px) {
 
-  .max-md\:hidden {
+  .max-md\:hx-hidden {
     display: none;
   }
 
-  .max-md\:min-h-\[340px\] {
+  .max-md\:hx-min-h-\[340px\] {
     min-height: 340px;
   }
 
@@ -3364,114 +3358,114 @@ body {
 }
 @media (min-width: 640px) {
 
-  .sm\:block {
+  .sm\:hx-block {
     display: block;
   }
 
-  .sm\:flex {
+  .sm\:hx-flex {
     display: flex;
   }
 
-  .sm\:w-\[110\%\] {
+  .sm\:hx-w-\[110\%\] {
     width: 110%;
   }
 
-  .sm\:grid-cols-2 {
+  .sm\:hx-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .sm\:items-start {
+  .sm\:hx-items-start {
     align-items: flex-start;
   }
 
-  .sm\:text-xl {
+  .sm\:hx-text-xl {
     font-size: 1.25rem;
   }
 }
 @media (min-width: 768px) {
 
-  .md\:sticky {
+  .md\:hx-sticky {
     position: sticky;
   }
 
-  .md\:top-16 {
+  .md\:hx-top-16 {
     top: 4rem;
   }
 
-  .md\:inline-block {
+  .md\:hx-inline-block {
     display: inline-block;
   }
 
-  .md\:hidden {
+  .md\:hx-hidden {
     display: none;
   }
 
-  .md\:aspect-\[1\.1\/1\] {
+  .md\:hx-aspect-\[1\.1\/1\] {
     aspect-ratio: 1.1/1;
   }
 
-  .md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] {
+  .md\:hx-h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] {
     height: calc(100vh - var(--navbar-height) - var(--menu-height));
   }
 
-  .md\:max-h-\[min\(calc\(100vh-5rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
+  .md\:hx-max-h-\[min\(calc\(100vh-5rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] {
     max-height: min(calc(100vh - 5rem - env(safe-area-inset-bottom)),400px);
   }
 
-  .md\:w-64 {
+  .md\:hx-w-64 {
     width: 16rem;
   }
 
-  .md\:shrink-0 {
+  .md\:hx-shrink-0 {
     flex-shrink: 0;
   }
 
-  .md\:justify-start {
+  .md\:hx-justify-start {
     justify-content: flex-start;
   }
 
-  .md\:self-start {
+  .md\:hx-self-start {
     align-self: flex-start;
   }
 
-  .md\:px-12 {
+  .md\:hx-px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
   }
 
-  .md\:pt-12 {
+  .md\:hx-pt-12 {
     padding-top: 3rem;
   }
 
-  .md\:text-5xl {
+  .md\:hx-text-5xl {
     font-size: 3rem;
   }
 
-  .md\:text-lg {
+  .md\:hx-text-lg {
     font-size: 1.125rem;
   }
 
-  .md\:text-sm {
+  .md\:hx-text-sm {
     font-size: .875rem;
   }
 
-  :is([dir="ltr"] .ltr\:md\:left-auto) {
+  :is([dir="ltr"] .ltr\:md\:hx-left-auto) {
     left: auto;
   }
 
-  :is([dir="rtl"] .rtl\:md\:right-auto) {
+  :is([dir="rtl"] .rtl\:md\:hx-right-auto) {
     right: auto;
   }
 }
 @media (min-width: 1024px) {
 
-  .lg\:grid-cols-3 {
+  .lg\:hx-grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 @media (min-width: 1280px) {
 
-  .xl\:block {
+  .xl\:hx-block {
     display: block;
   }
 }
diff --git a/assets/css/components/code-copy.css b/assets/css/components/code-copy.css
index 4547feaf..3c020d34 100644
--- a/assets/css/components/code-copy.css
+++ b/assets/css/components/code-copy.css
@@ -2,6 +2,6 @@
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .code-copy-btn {
-    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+    @apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
   }
 }
diff --git a/assets/css/components/navbar.css b/assets/css/components/navbar.css
index 8bca91de..4e9e3855 100644
--- a/assets/css/components/navbar.css
+++ b/assets/css/components/navbar.css
@@ -1,6 +1,6 @@
 nav {
   .search-wrapper {
-    @apply hidden md:inline-block;
+    @apply hx-hidden md:hx-inline-block;
   }
 }
 
@@ -8,13 +8,13 @@ nav {
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .nav-container-blur {
-    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
+    @apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
   }
 }
 
 .hamburger-menu svg {
   g {
-    @apply origin-center;
+    @apply hx-origin-center;
     transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
   }
   path {
@@ -37,16 +37,16 @@ nav {
 
   &.open > {
     path {
-      @apply opacity-0;
+      @apply hx-opacity-0;
     }
     g:nth-of-type(1) {
-      @apply rotate-45;
+      @apply hx-rotate-45;
       path {
         transform: translate3d(0, 4px, 0);
       }
     }
     g:nth-of-type(2) {
-      @apply -rotate-45;
+      @apply -hx-rotate-45;
       path {
         transform: translate3d(0, -4px, 0);
       }
diff --git a/assets/css/components/scrollbar.css b/assets/css/components/scrollbar.css
index e60c1d12..7dc75e90 100644
--- a/assets/css/components/scrollbar.css
+++ b/assets/css/components/scrollbar.css
@@ -4,18 +4,18 @@
 
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply w-3 h-3;
+    @apply hx-w-3 hx-h-3;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    @apply hx-bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply rounded-[10px];
+    @apply hx-rounded-[10px];
   }
   &:hover::-webkit-scrollbar-thumb {
     border: 3px solid transparent;
     background-color: var(--tw-shadow-color);
     background-clip: content-box;
-    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+    @apply hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
   }
 }
diff --git a/assets/css/components/search.css b/assets/css/components/search.css
index 1994f84d..3d508bc3 100644
--- a/assets/css/components/search.css
+++ b/assets/css/components/search.css
@@ -1,31 +1,31 @@
 .search-wrapper {
   li {
-    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
+    @apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
     a {
-      @apply block scroll-m-12 px-2.5 py-2;
+      @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
     }
 
     .title {
-      @apply text-base font-semibold leading-5;
+      @apply hx-text-base hx-font-semibold hx-leading-5;
     }
 
     .active {
-      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
+      @apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
     }
   }
 
   .no-result {
-    @apply block select-none p-8 text-center text-sm text-gray-400;
+    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
   }
 
   .prefix {
-    @apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
-    uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
-    contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
+    @apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
+    hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
+    contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
   }
 
   .excerpt {
-    @apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
+    @apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
     display: -webkit-box;
     line-clamp: 1;
     -webkit-line-clamp: 1;
@@ -33,6 +33,6 @@
   }
 
   .match {
-    @apply text-primary-600;
+    @apply hx-text-primary-600;
   }
 }
diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
index 0ccbfb94..394c8d63 100644
--- a/assets/css/components/sidebar.css
+++ b/assets/css/components/sidebar.css
@@ -1,6 +1,6 @@
 @media (max-width: 767px) {
   .sidebar-container {
-    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
+    @apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
     transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
@@ -10,12 +10,12 @@
 
 .sidebar-container {
   li > div {
-    @apply h-0;
+    @apply hx-h-0;
   }
   li.open > div {
-    @apply h-auto pt-1;
+    @apply hx-h-auto hx-pt-1;
   }
   li.open > a > span > svg > path {
-    @apply rotate-90;
+    @apply hx-rotate-90;
   }
 }
diff --git a/assets/css/components/steps.css b/assets/css/components/steps.css
index 680d02d2..278862d0 100644
--- a/assets/css/components/steps.css
+++ b/assets/css/components/steps.css
@@ -2,10 +2,10 @@
   counter-increment: step;
 
   &:before {
-    @apply absolute w-[33px] h-[33px];
-    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
-    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
-    @apply mt-[3px] ml-[-41px];
+    @apply hx-absolute hx-w-[33px] hx-h-[33px];
+    @apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
+    @apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
+    @apply hx-mt-[3px] hx-ml-[-41px];
     content: counter(step);
   }
 }
diff --git a/assets/css/highlight.css b/assets/css/highlight.css
index 089171bc..ee6fdb34 100644
--- a/assets/css/highlight.css
+++ b/assets/css/highlight.css
@@ -3,51 +3,51 @@
 @import "chroma/dark.css";
 
 .code-block {
-  @apply text-[.9em] leading-5;
+  @apply hx-text-[.9em] hx-leading-5;
 
   pre {
-    @apply text-[.9em] bg-primary-700/5 overflow-x-auto font-medium subpixel-antialiased dark:bg-primary-300/10 contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40;
+    @apply hx-text-[.9em] hx-bg-primary-700/5 hx-overflow-x-auto hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40;
   }
 
   .filename {
-    @apply absolute top-0 z-[1] w-full truncate rounded-t-xl bg-primary-700/5 py-2 px-4 text-xs text-gray-700 dark:bg-primary-300/10 dark:text-gray-200;
+    @apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
   }
 
   .filename + pre:not(.lntable pre) {
     /* Override padding for code blocks with filename but no highlight */
-    @apply pt-12;
+    @apply hx-pt-12;
   }
 }
 
 .code-block pre:not(.lntable pre) {
-  @apply px-4 mb-4 py-4 rounded-xl;
+  @apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
 }
 
 .code-block div:nth-of-type(2) pre {
-  @apply pt-12 pb-4;
+  @apply hx-pt-12 hx-pb-4;
 }
 
 .chroma {
   .lntable {
-    @apply m-0 block w-auto overflow-auto rounded-xl;
+    @apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
 
     pre {
-      @apply pt-4 pb-4;
+      @apply hx-pt-4 hx-pb-4;
     }
   }
   .ln,
   .lnt:not(.hl > .lnt),
   .hl:not(.line) {
-    @apply pl-4 pr-4 min-w-[2.6rem] text-neutral-600 dark:text-neutral-300;
+    @apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
   }
   .lntd {
-    @apply p-0 align-top;
+    @apply hx-p-0 hx-align-top;
   }
   .lntd:last-of-type {
-    @apply w-full;
+    @apply hx-w-full;
   }
   /* LineHighlight */
   .hl {
-    @apply block w-full bg-primary-800/10;
+    @apply hx-block hx-w-full hx-bg-primary-800/10;
   }
 }
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 481a2acb..3ef02b86 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -11,13 +11,13 @@
 @import "components/code-copy.css";
 
 html {
-  @apply text-base antialiased;
+  @apply hx-text-base hx-antialiased;
   font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
-  @apply w-full bg-white dark:bg-dark dark:text-gray-100;
+  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
 }
 
 :root {
diff --git a/assets/css/typography.css b/assets/css/typography.css
index bfd96adf..47ee352a 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -1,117 +1,117 @@
 .content {
   :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
+    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
   }
   :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
   }
   :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
   }
   :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
   }
   :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
   }
   :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
+    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
   }
   :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 leading-7 first:mt-0;
+    @apply hx-mt-6 hx-leading-7 first:hx-mt-0;
   }
   :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
+    @apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
   }
   :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
+    @apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
   }
   :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
+    @apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
   }
   :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
-    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
   :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
-    @apply block overflow-x-auto mt-6 p-0 first:mt-0;
+    @apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
 
     tr {
-      @apply m-0 border-t border-gray-300 p-0 dark:border-gray-600 even:bg-gray-100 even:dark:bg-gray-600/20;
+      @apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
     }
     th {
-      @apply m-0 border border-gray-300 px-4 py-2 font-semibold dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
     }
     td {
-      @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
+      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
     }
   }
   :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
   :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
+    @apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
-      @apply my-2;
+      @apply hx-my-2;
     }
   }
-  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list 
-     inside the list item (li) of any parent ul or ol. 
+  /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
+     inside the list item (li) of any parent ul or ol.
      The rule sets the top margin of the selected list to zero. */
   :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mt-0;
+    @apply hx-mt-0;
   }
   :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
+    @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
   :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
-    @apply bg-transparent rounded-none dark:bg-transparent;
+    @apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
   }
   :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply mx-auto my-4 rounded-md;
+    @apply hx-mx-auto hx-my-4 hx-rounded-md;
   }
   :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
     figcaption {
-      @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
+      @apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
     }
   }
   .footnotes {
-    @apply mt-12 text-sm;
+    @apply hx-mt-12 hx-text-sm;
   }
 }
 
 .subheading-anchor {
-  @apply opacity-0 transition-opacity ltr:ml-1 rtl:mr-1;
+  @apply hx-opacity-0 hx-transition-opacity ltr:hx-ml-1 rtl:hx-mr-1;
 
   span:target + &,
   :hover > &,
   &:focus {
-    @apply opacity-100;
+    @apply hx-opacity-100;
   }
 
   span + &,
   :hover > & {
-    @apply !no-underline;
+    @apply !hx-no-underline;
   }
 
   &:after {
-    @apply content-['#'] px-1;
-    @apply text-gray-300 dark:text-neutral-700;
+    @apply hx-content-['#'] hx-px-1;
+    @apply hx-text-gray-300 dark:hx-text-neutral-700;
     span:target + & {
-      @apply text-gray-400;
-      @apply dark:text-neutral-500;
+      @apply hx-text-gray-400;
+      @apply dark:hx-text-neutral-500;
     }
   }
 }
 
 article details > summary {
   &::-webkit-details-marker {
-    @apply hidden;
+    @apply hx-hidden;
   }
   &::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='hx-h-5 hx-w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
     height: 1.2em;
     width: 1.2em;
     vertical-align: -4px;
diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
index df6f1be1..8b7a64e7 100644
--- a/assets/js/back-to-top.js
+++ b/assets/js/back-to-top.js
@@ -5,9 +5,9 @@ document.addEventListener("DOMContentLoaded", function () {
   if (backToTop) {
     document.addEventListener("scroll", (e) => {
       if (window.scrollY > 300) {
-        backToTop.classList.remove("opacity-0");
+        backToTop.classList.remove("hx-opacity-0");
       } else {
-        backToTop.classList.add("opacity-0");
+        backToTop.classList.add("hx-opacity-0");
       }
     });
   }
diff --git a/assets/js/flexsearch.js b/assets/js/flexsearch.js
index 99fdf680..15e5a1d2 100644
--- a/assets/js/flexsearch.js
+++ b/assets/js/flexsearch.js
@@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
     // select the kbd element under the .search-wrapper class
     const keys = document.querySelectorAll(".search-wrapper kbd");
     keys.forEach(key => {
-      key.innerHTML = '<span class="text-xs">⌘</span>K';
+      key.innerHTML = '<span class="hx-text-xs">⌘</span>K';
     });
   }
 });
@@ -128,7 +128,7 @@ document.addEventListener("DOMContentLoaded", function () {
   function hideSearchResults() {
     const { resultsElement } = getActiveSearchElement();
     if (!resultsElement) return;
-    resultsElement.classList.add('hidden');
+    resultsElement.classList.add('hx-hidden');
   }
 
   // Handle keyboard events.
@@ -250,7 +250,7 @@ document.addEventListener("DOMContentLoaded", function () {
     while (resultsElement.firstChild) {
       resultsElement.removeChild(resultsElement.firstChild);
     }
-    resultsElement.classList.remove('hidden');
+    resultsElement.classList.remove('hx-hidden');
 
     const pageResults = window.pageIndex.search(query, 5, { enrich: true, suggest: true })[0]?.result || [];
 
diff --git a/assets/js/lang.js b/assets/js/lang.js
index b5bd45f8..159de3d0 100644
--- a/assets/js/lang.js
+++ b/assets/js/lang.js
@@ -5,7 +5,7 @@
       e.preventDefault();
       switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open';
       const optionsElement = switcher.nextElementSibling;
-      optionsElement.classList.toggle('hidden');
+      optionsElement.classList.toggle('hx-hidden');
 
       // Calculate position of language options element
       const switcherRect = switcher.getBoundingClientRect();
@@ -21,7 +21,7 @@
       languageSwitchers.forEach((switcher) => {
         switcher.dataset.state = 'closed';
         const optionsElement = switcher.nextElementSibling;
-        optionsElement.classList.add('hidden');
+        optionsElement.classList.add('hx-hidden');
       });
     }
   });
diff --git a/assets/js/menu.js b/assets/js/menu.js
index 95c85ada..9191b057 100644
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@@ -6,9 +6,9 @@ document.addEventListener('DOMContentLoaded', function () {
   const sidebarContainer = document.querySelector('.sidebar-container');
 
   // Initialize the overlay
-  const overlayClasses = ['fixed', 'inset-0', 'z-10', 'bg-black/80', 'dark:bg-black/60'];
-  overlay.classList.add('bg-transparent');
-  overlay.classList.remove("hidden", ...overlayClasses);
+  const overlayClasses = ['hx-fixed', 'hx-inset-0', 'hx-z-10', 'hx-bg-black/80', 'dark:hx-bg-black/60'];
+  overlay.classList.add('hx-bg-transparent');
+  overlay.classList.remove("hx-hidden", ...overlayClasses);
 
   function toggleMenu() {
     // Toggle the hamburger menu
@@ -19,22 +19,22 @@ document.addEventListener('DOMContentLoaded', function () {
     sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
 
     // When the menu is open, we want to prevent the body from scrolling
-    document.body.classList.toggle('overflow-hidden');
-    document.body.classList.toggle('md:overflow-auto');
+    document.body.classList.toggle('hx-overflow-hidden');
+    document.body.classList.toggle('md:hx-overflow-auto');
   }
 
   menu.addEventListener('click', (e) => {
     e.preventDefault();
     toggleMenu();
 
-    if (overlay.classList.contains('bg-transparent')) {
+    if (overlay.classList.contains('hx-bg-transparent')) {
       // Show the overlay
       overlay.classList.add(...overlayClasses);
-      overlay.classList.remove('bg-transparent');
+      overlay.classList.remove('hx-bg-transparent');
     } else {
       // Hide the overlay
       overlay.classList.remove(...overlayClasses);
-      overlay.classList.add('bg-transparent');
+      overlay.classList.add('hx-bg-transparent');
     }
   });
 
@@ -44,6 +44,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // Hide the overlay
     overlay.classList.remove(...overlayClasses);
-    overlay.classList.add('bg-transparent');
+    overlay.classList.add('hx-bg-transparent');
   });
 });
diff --git a/exampleSite/content/_index.fa.md b/exampleSite/content/_index.fa.md
index de853d48..5c6da1df 100644
--- a/exampleSite/content/_index.fa.md
+++ b/exampleSite/content/_index.fa.md
@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
   <span>آزاد، متن‌باز</span>
   {{< icon name="arrow-circle-left" attributes="height=14" >}}
 {{< /hextra/hero-badge >}}
 
-<div class="mt-6 mb-6">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  ساخت وب‌سایت‌های مدرن &nbsp;<br class="sm:block hidden" />با مارک‌داون و هیوگو
+  ساخت وب‌سایت‌های مدرن &nbsp;<br class="sm:hx-block hx-hidden" />با مارک‌داون و هیوگو
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  تم هیوگو سریع و دارای امکانات کامل&nbsp;<br class="sm:block hidden" />برای ایجاد وب‌سایت‌های استاتیک زیبا
+  تم هیوگو سریع و دارای امکانات کامل&nbsp;<br class="sm:hx-block hx-hidden" />برای ایجاد وب‌سایت‌های استاتیک زیبا
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="شروع کنید" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-mt-6"></div>
 
 {{< hextra/feature-grid >}}
   {{< hextra/feature-card
     title="سریع و با امکانات کامل"
     subtitle="ساده و آسان برای استفاده، در عین حال قدرتمند و غنی از ویژگی‌ها متنوع."
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
     title="مارک‌داون تنها چیزی است که شما نیاز دارید"
     subtitle="فقط با مارک‌داون بنویسید. تکمیل و کامل با کامپوننت‌های کد کوتاه."
-    class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="/images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
     title="جستجوی کامل متن"
     subtitle="جستجوی متن کامل داخلی با FlexSearch، بدون نیاز به نصب موارد اضافی."
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 11f1caaa..7c53d38f 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
   <span>Free, open source</span>
   {{< icon name="arrow-circle-right" attributes="height=14" >}}
 {{< /hextra/hero-badge >}}
 
-<div class="mt-6 mb-6">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  Build modern websites&nbsp;<br class="sm:block hidden" />with Markdown and Hugo
+  Build modern websites&nbsp;<br class="sm:hx-block hx-hidden" />with Markdown and Hugo
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  Fast, batteries-included Hugo theme&nbsp;<br class="sm:block hidden" />for creating beautiful static websites
+  Fast, batteries-included Hugo theme&nbsp;<br class="sm:hx-block hx-hidden" />for creating beautiful static websites
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="Get Started" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-mt-6"></div>
 
 {{< hextra/feature-grid >}}
   {{< hextra/feature-card
     title="Fast and Full-featured"
     subtitle="Simple and easy to use, yet powerful and feature-rich."
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
     title="Markdown is All You Need"
     subtitle="Compose with just Markdown. Enrich with Shortcode components."
-    class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
     title="Full Text Search"
     subtitle="Built-in full text search with FlexSearch, no extra setup required."
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
diff --git a/exampleSite/content/_index.zh-cn.md b/exampleSite/content/_index.zh-cn.md
index 1dff4eaf..d825babd 100644
--- a/exampleSite/content/_index.zh-cn.md
+++ b/exampleSite/content/_index.zh-cn.md
@@ -4,52 +4,52 @@ layout: hextra-home
 ---
 
 {{< hextra/hero-badge >}}
-  <div class="w-2 h-2 rounded-full bg-primary-400"></div>
+  <div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
   <span>免费 开源</span>
   {{< icon name="arrow-circle-right" attributes="height=14" >}}
 {{< /hextra/hero-badge >}}
 
-<div class="mt-6 mb-6">
+<div class="hx-mt-6 hx-mb-6">
 {{< hextra/hero-headline >}}
-  创建现代化网站&nbsp;<br class="sm:block hidden" />由 Markdown 和 Hugo 驱动
+  创建现代化网站&nbsp;<br class="sm:hx-block hx-hidden" />由 Markdown 和 Hugo 驱动
 {{< /hextra/hero-headline >}}
 </div>
 
-<div class="mb-12">
+<div class="hx-mb-12">
 {{< hextra/hero-subtitle >}}
-  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:block hidden" />为构建现代化的静态网站而生
+  极速且全能的 Hugo 主题框架&nbsp;<br class="sm:hx-block hx-hidden" />为构建现代化的静态网站而生
 {{< /hextra/hero-subtitle >}}
 </div>
 
-<div class="mb-6">
+<div class="hx-mb-6">
 {{< hextra/hero-button text="现在开始" link="docs" >}}
 </div>
 
-<div class="mt-6"></div>
+<div class="hx-mt-6"></div>
 
 {{< hextra/feature-grid >}}
   {{< hextra/feature-card
     title="快速且功能全面"
     subtitle="简单易用，功能强大丰富。"
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-doc.webp"
-    imageClass="top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
     title="Markdown 写作"
     subtitle="只需使用 Markdown 进行编辑。多样的 Shortcode 组件开箱即用。"
-    class="aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
     image="/images/hextra-markdown.webp"
-    imageClass="top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
     title="全文搜索"
     subtitle="内置 FlexSearch 全文搜索，无需额外设置。"
-    class="aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
+    class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
     image="/images/hextra-search.webp"
-    imageClass="top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
+    imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
     style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
   >}}
   {{< hextra/feature-card
diff --git a/exampleSite/content/showcase/index.fa.md b/exampleSite/content/showcase/index.fa.md
index 70eabb1b..11211803 100644
--- a/exampleSite/content/showcase/index.fa.md
+++ b/exampleSite/content/showcase/index.fa.md
@@ -5,9 +5,9 @@ toc: false
 layout: wide
 ---
 
-<div class="mt-4"></div>
+<div class="hx-mt-4"></div>
 
-<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
 پروژه‌های متن‌باز که توسط هگزترا طراحی شده‌اند.
 </p>
 
diff --git a/exampleSite/content/showcase/index.md b/exampleSite/content/showcase/index.md
index b7de1fe8..5a799ed3 100644
--- a/exampleSite/content/showcase/index.md
+++ b/exampleSite/content/showcase/index.md
@@ -5,9 +5,9 @@ toc: false
 layout: wide
 ---
 
-<div class="mt-4"></div>
+<div class="hx-mt-4"></div>
 
-<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
 Open source projects powered by Hextra.
 </p>
 
diff --git a/exampleSite/content/showcase/index.zh-cn.md b/exampleSite/content/showcase/index.zh-cn.md
index 99aabc1c..2959c8f2 100644
--- a/exampleSite/content/showcase/index.zh-cn.md
+++ b/exampleSite/content/showcase/index.zh-cn.md
@@ -5,9 +5,9 @@ toc: false
 layout: wide
 ---
 
-<div class="mt-4"></div>
+<div class="hx-mt-4"></div>
 
-<p class="mb-12 text-center text-lg text-gray-500 dark:text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
 由 Hextra 驱动的开源网站和项目。
 </p>
 
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
index 96fe6508..46e46a7d 100644
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -58,231 +58,158 @@
       "ul"
     ],
     "classes": [
-      "-mb-0.5",
-      "-ml-2",
-      "-mr-2",
-      "-mt-20",
+      "-hx-mb-0.5",
+      "-hx-ml-2",
+      "-hx-mr-2",
+      "-hx-mt-20",
       "[-webkit-tap-highlight-color:transparent]",
       "[-webkit-touch-callout:none]",
       "[counter-reset:step]",
       "[hyphens:auto]",
       "[transition:background-color_1.5s_ease]",
       "[word-break:break-word]",
-      "absolute",
-      "active:bg-gray-400/20",
-      "active:opacity-50",
-      "active:shadow-gray-200",
-      "active:shadow-sm",
-      "align-[-2.5px]",
-      "align-text-bottom",
-      "appearance-none",
-      "aspect-auto",
-      "before:absolute",
-      "before:bg-glass-gradient",
-      "before:bg-gray-200",
-      "before:content-[\"\"]",
-      "before:content-['#']",
-      "before:content-['']",
-      "before:inline-block",
-      "before:inset-0",
-      "before:inset-y-1",
-      "before:mr-1",
-      "before:opacity-25",
-      "before:pointer-events-none",
-      "before:transition-transform",
-      "before:w-px",
-      "bg-black/80",
-      "bg-black/[.05]",
-      "bg-blue-100",
-      "bg-clip-text",
-      "bg-gradient-to-r",
-      "bg-gray-100",
-      "bg-neutral-50",
-      "bg-orange-50",
-      "bg-primary-100",
-      "bg-primary-400",
-      "bg-primary-600",
-      "bg-primary-700/5",
-      "bg-red-100",
-      "bg-transparent",
-      "bg-white",
-      "bg-yellow-50",
-      "block",
-      "border",
-      "border-b",
-      "border-b-2",
-      "border-black/5",
-      "border-blue-200",
-      "border-gray-200",
-      "border-gray-500",
-      "border-l",
-      "border-orange-100",
-      "border-red-200",
-      "border-t",
-      "border-transparent",
-      "border-yellow-100",
-      "bottom-0",
-      "break-words",
-      "capitalize",
+      "active:hx-bg-gray-400/20",
+      "active:hx-opacity-50",
+      "active:hx-shadow-gray-200",
+      "active:hx-shadow-sm",
+      "before:hx-absolute",
+      "before:hx-bg-glass-gradient",
+      "before:hx-bg-gray-200",
+      "before:hx-content-[\"\"]",
+      "before:hx-content-['#']",
+      "before:hx-content-['']",
+      "before:hx-inline-block",
+      "before:hx-inset-0",
+      "before:hx-inset-y-1",
+      "before:hx-mr-1",
+      "before:hx-opacity-25",
+      "before:hx-pointer-events-none",
+      "before:hx-transition-transform",
+      "before:hx-w-px",
       "chroma",
       "code-block",
       "code-copy-btn",
       "content",
-      "contrast-more:border",
-      "contrast-more:border-current",
-      "contrast-more:border-gray-800",
-      "contrast-more:border-gray-900",
-      "contrast-more:border-neutral-400",
-      "contrast-more:border-primary-500",
-      "contrast-more:border-t",
-      "contrast-more:border-transparent",
-      "contrast-more:dark:border-current",
-      "contrast-more:dark:border-gray-50",
-      "contrast-more:dark:border-neutral-400",
-      "contrast-more:dark:border-primary-500",
-      "contrast-more:dark:hover:border-gray-50",
-      "contrast-more:dark:shadow-[0_0_0_1px_#fff]",
-      "contrast-more:dark:shadow-none",
-      "contrast-more:dark:text-current",
-      "contrast-more:dark:text-gray-100",
-      "contrast-more:dark:text-gray-300",
-      "contrast-more:dark:text-gray-50",
-      "contrast-more:font-bold",
-      "contrast-more:hover:border-gray-900",
-      "contrast-more:shadow-[0_0_0_1px_#000]",
-      "contrast-more:shadow-none",
-      "contrast-more:text-current",
-      "contrast-more:text-gray-700",
-      "contrast-more:text-gray-800",
-      "contrast-more:text-gray-900",
-      "contrast-more:underline",
+      "contrast-more:dark:hover:hx-border-gray-50",
+      "contrast-more:dark:hx-border-current",
+      "contrast-more:dark:hx-border-gray-50",
+      "contrast-more:dark:hx-border-neutral-400",
+      "contrast-more:dark:hx-border-primary-500",
+      "contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]",
+      "contrast-more:dark:hx-shadow-none",
+      "contrast-more:dark:hx-text-current",
+      "contrast-more:dark:hx-text-gray-100",
+      "contrast-more:dark:hx-text-gray-300",
+      "contrast-more:dark:hx-text-gray-50",
+      "contrast-more:hover:hx-border-gray-900",
+      "contrast-more:hx-border",
+      "contrast-more:hx-border-current",
+      "contrast-more:hx-border-gray-800",
+      "contrast-more:hx-border-gray-900",
+      "contrast-more:hx-border-neutral-400",
+      "contrast-more:hx-border-primary-500",
+      "contrast-more:hx-border-t",
+      "contrast-more:hx-border-transparent",
+      "contrast-more:hx-font-bold",
+      "contrast-more:hx-shadow-[0_0_0_1px_#000]",
+      "contrast-more:hx-shadow-none",
+      "contrast-more:hx-text-current",
+      "contrast-more:hx-text-gray-700",
+      "contrast-more:hx-text-gray-800",
+      "contrast-more:hx-text-gray-900",
+      "contrast-more:hx-underline",
       "copy-icon",
-      "cursor-default",
-      "cursor-pointer",
-      "dark:before:bg-neutral-800",
-      "dark:before:invert",
-      "dark:bg-black/60",
-      "dark:bg-blue-900/30",
-      "dark:bg-dark",
-      "dark:bg-dark/50",
-      "dark:bg-gray-50/10",
-      "dark:bg-neutral-800",
-      "dark:bg-neutral-900",
-      "dark:bg-orange-400/20",
-      "dark:bg-primary-300/10",
-      "dark:bg-primary-400/10",
-      "dark:bg-primary-600",
-      "dark:bg-red-900/30",
-      "dark:bg-yellow-700/30",
-      "dark:block",
-      "dark:border-blue-200/30",
-      "dark:border-gray-100/20",
-      "dark:border-gray-400",
-      "dark:border-neutral-700",
-      "dark:border-neutral-800",
-      "dark:border-orange-400/30",
-      "dark:border-red-200/30",
-      "dark:border-white/10",
-      "dark:border-yellow-200/30",
-      "dark:contrast-more:border-neutral-400",
-      "dark:focus:bg-dark",
-      "dark:focus:ring-primary-800",
-      "dark:from-gray-100",
-      "dark:hidden",
-      "dark:hover:bg-gray-100/5",
-      "dark:hover:bg-neutral-700",
-      "dark:hover:bg-neutral-800",
-      "dark:hover:bg-neutral-900",
-      "dark:hover:bg-primary-100/5",
-      "dark:hover:bg-primary-700",
-      "dark:hover:border-gray-100",
-      "dark:hover:border-gray-600",
-      "dark:hover:border-neutral-500",
-      "dark:hover:border-neutral-700",
-      "dark:hover:border-neutral-800",
-      "dark:hover:shadow-none",
-      "dark:hover:text-gray-100",
-      "dark:hover:text-gray-200",
-      "dark:hover:text-gray-300",
-      "dark:hover:text-gray-50",
-      "dark:hover:text-neutral-50",
-      "dark:hover:text-white",
-      "dark:opacity-80",
-      "dark:placeholder:text-gray-400",
-      "dark:ring-white/20",
-      "dark:shadow-[0_-12px_16px_#111]",
-      "dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
-      "dark:shadow-none",
-      "dark:text-blue-200",
-      "dark:text-gray-100",
-      "dark:text-gray-200",
-      "dark:text-gray-300",
-      "dark:text-gray-400",
-      "dark:text-gray-50",
-      "dark:text-neutral-200",
-      "dark:text-neutral-400",
-      "dark:text-orange-300",
-      "dark:text-primary-600",
-      "dark:text-red-200",
-      "dark:text-slate-100",
-      "dark:text-yellow-200",
-      "dark:to-gray-400",
-      "data-[state=closed]:hidden",
-      "data-[state=open]:hidden",
-      "data-[state=selected]:block",
-      "data-[state=selected]:border-primary-500",
-      "data-[state=selected]:text-primary-600",
-      "decoration-from-font",
-      "duration-200",
-      "duration-75",
-      "ease-in",
+      "dark:before:hx-bg-neutral-800",
+      "dark:before:hx-invert",
+      "dark:contrast-more:hx-border-neutral-400",
+      "dark:focus:hx-bg-dark",
+      "dark:focus:hx-ring-primary-800",
+      "dark:hover:hx-bg-gray-100/5",
+      "dark:hover:hx-bg-neutral-700",
+      "dark:hover:hx-bg-neutral-800",
+      "dark:hover:hx-bg-neutral-900",
+      "dark:hover:hx-bg-primary-100/5",
+      "dark:hover:hx-bg-primary-700",
+      "dark:hover:hx-border-gray-100",
+      "dark:hover:hx-border-gray-600",
+      "dark:hover:hx-border-neutral-500",
+      "dark:hover:hx-border-neutral-700",
+      "dark:hover:hx-border-neutral-800",
+      "dark:hover:hx-shadow-none",
+      "dark:hover:hx-text-gray-100",
+      "dark:hover:hx-text-gray-200",
+      "dark:hover:hx-text-gray-300",
+      "dark:hover:hx-text-gray-50",
+      "dark:hover:hx-text-neutral-50",
+      "dark:hover:hx-text-white",
+      "dark:hx-bg-black/60",
+      "dark:hx-bg-blue-900/30",
+      "dark:hx-bg-dark",
+      "dark:hx-bg-dark/50",
+      "dark:hx-bg-gray-50/10",
+      "dark:hx-bg-neutral-800",
+      "dark:hx-bg-neutral-900",
+      "dark:hx-bg-orange-400/20",
+      "dark:hx-bg-primary-300/10",
+      "dark:hx-bg-primary-400/10",
+      "dark:hx-bg-primary-600",
+      "dark:hx-bg-red-900/30",
+      "dark:hx-bg-yellow-700/30",
+      "dark:hx-block",
+      "dark:hx-border-blue-200/30",
+      "dark:hx-border-gray-100/20",
+      "dark:hx-border-gray-400",
+      "dark:hx-border-neutral-700",
+      "dark:hx-border-neutral-800",
+      "dark:hx-border-orange-400/30",
+      "dark:hx-border-red-200/30",
+      "dark:hx-border-white/10",
+      "dark:hx-border-yellow-200/30",
+      "dark:hx-from-gray-100",
+      "dark:hx-hidden",
+      "dark:hx-opacity-80",
+      "dark:hx-ring-white/20",
+      "dark:hx-shadow-[0_-12px_16px_#111]",
+      "dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]",
+      "dark:hx-shadow-none",
+      "dark:hx-text-blue-200",
+      "dark:hx-text-gray-100",
+      "dark:hx-text-gray-200",
+      "dark:hx-text-gray-300",
+      "dark:hx-text-gray-400",
+      "dark:hx-text-gray-50",
+      "dark:hx-text-neutral-200",
+      "dark:hx-text-neutral-400",
+      "dark:hx-text-orange-300",
+      "dark:hx-text-primary-600",
+      "dark:hx-text-red-200",
+      "dark:hx-text-slate-100",
+      "dark:hx-text-yellow-200",
+      "dark:hx-to-gray-400",
+      "dark:placeholder:hx-text-gray-400",
+      "data-[state=closed]:hx-hidden",
+      "data-[state=open]:hx-hidden",
+      "data-[state=selected]:hx-block",
+      "data-[state=selected]:hx-border-primary-500",
+      "data-[state=selected]:hx-text-primary-600",
       "filename",
-      "first:mt-0",
-      "fixed",
-      "flex",
-      "flex-col",
-      "flex-wrap",
-      "focus:bg-white",
-      "focus:outline-none",
-      "focus:ring-4",
-      "focus:ring-primary-300",
-      "font-bold",
-      "font-extrabold",
-      "font-medium",
-      "font-mono",
-      "font-normal",
-      "font-semibold",
+      "first:hx-mt-0",
+      "focus:hx-bg-white",
+      "focus:hx-outline-none",
+      "focus:hx-ring-4",
+      "focus:hx-ring-primary-300",
       "footnote-backref",
       "footnote-ref",
       "footnotes",
-      "from-gray-900",
-      "gap-1",
-      "gap-2",
-      "gap-4",
-      "gap-x-1.5",
-      "gap-y-2",
-      "grid",
-      "grid-cols-1",
-      "group",
-      "group-[.copied]/copybtn:block",
-      "group-[.copied]/copybtn:hidden",
-      "group-data-[theme=dark]:hidden",
-      "group-data-[theme=light]:hidden",
-      "group-hover/code:opacity-100",
-      "group-hover:underline",
-      "group-open:before:rotate-90",
+      "group-[.copied]/copybtn:hx-block",
+      "group-[.copied]/copybtn:hx-hidden",
+      "group-data-[theme=dark]:hx-hidden",
+      "group-data-[theme=light]:hx-hidden",
+      "group-hover/code:hx-opacity-100",
+      "group-hover:hx-underline",
+      "group-open:before:hx-rotate-90",
       "group/code",
       "group/copybtn",
-      "grow",
-      "h-0",
-      "h-16",
-      "h-2",
-      "h-3.5",
-      "h-4",
-      "h-5",
-      "h-7",
-      "h-[18px]",
-      "h-full",
       "hamburger-menu",
       "hextra-card",
       "hextra-cards",
@@ -293,312 +220,385 @@
       "hextra-scrollbar",
       "hextra-sidebar-collapsible-button",
       "hextra-toc",
-      "hidden",
       "highlight",
-      "hover:bg-gray-100",
-      "hover:bg-gray-800/5",
-      "hover:bg-primary-50",
-      "hover:bg-primary-700",
-      "hover:bg-slate-50",
-      "hover:border-gray-200",
-      "hover:border-gray-300",
-      "hover:border-gray-400",
-      "hover:border-gray-900",
-      "hover:dark:bg-primary-500/10",
-      "hover:dark:text-primary-600",
-      "hover:opacity-60",
-      "hover:opacity-75",
-      "hover:shadow-gray-100",
-      "hover:shadow-lg",
-      "hover:shadow-md",
-      "hover:text-black",
-      "hover:text-gray-800",
-      "hover:text-gray-900",
-      "hover:text-primary-600",
+      "hover:dark:hx-bg-primary-500/10",
+      "hover:dark:hx-text-primary-600",
+      "hover:hx-bg-gray-100",
+      "hover:hx-bg-gray-800/5",
+      "hover:hx-bg-primary-50",
+      "hover:hx-bg-primary-700",
+      "hover:hx-bg-slate-50",
+      "hover:hx-border-gray-200",
+      "hover:hx-border-gray-300",
+      "hover:hx-border-gray-400",
+      "hover:hx-border-gray-900",
+      "hover:hx-opacity-60",
+      "hover:hx-opacity-75",
+      "hover:hx-shadow-gray-100",
+      "hover:hx-shadow-lg",
+      "hover:hx-shadow-md",
+      "hover:hx-text-black",
+      "hover:hx-text-gray-800",
+      "hover:hx-text-gray-900",
+      "hover:hx-text-primary-600",
+      "hx-absolute",
+      "hx-align-[-2.5px]",
+      "hx-align-text-bottom",
+      "hx-appearance-none",
+      "hx-aspect-auto",
+      "hx-bg-black/80",
+      "hx-bg-black/[.05]",
+      "hx-bg-blue-100",
+      "hx-bg-clip-text",
+      "hx-bg-gradient-to-r",
+      "hx-bg-gray-100",
+      "hx-bg-neutral-50",
+      "hx-bg-orange-50",
+      "hx-bg-primary-100",
+      "hx-bg-primary-400",
+      "hx-bg-primary-600",
+      "hx-bg-primary-700/5",
+      "hx-bg-red-100",
+      "hx-bg-transparent",
+      "hx-bg-white",
+      "hx-bg-yellow-50",
+      "hx-block",
+      "hx-border",
+      "hx-border-b",
+      "hx-border-b-2",
+      "hx-border-black/5",
+      "hx-border-blue-200",
+      "hx-border-gray-200",
+      "hx-border-gray-500",
+      "hx-border-l",
+      "hx-border-orange-100",
+      "hx-border-red-200",
+      "hx-border-t",
+      "hx-border-transparent",
+      "hx-border-yellow-100",
+      "hx-bottom-0",
+      "hx-break-words",
+      "hx-capitalize",
+      "hx-cursor-default",
+      "hx-cursor-pointer",
+      "hx-decoration-from-font",
+      "hx-duration-200",
+      "hx-duration-75",
+      "hx-ease-in",
+      "hx-fixed",
+      "hx-flex",
+      "hx-flex-col",
+      "hx-flex-wrap",
+      "hx-font-bold",
+      "hx-font-extrabold",
+      "hx-font-medium",
+      "hx-font-mono",
+      "hx-font-normal",
+      "hx-font-semibold",
+      "hx-from-gray-900",
+      "hx-gap-1",
+      "hx-gap-2",
+      "hx-gap-4",
+      "hx-gap-x-1.5",
+      "hx-gap-y-2",
+      "hx-grid",
+      "hx-grid-cols-1",
+      "hx-group",
+      "hx-grow",
+      "hx-h-0",
+      "hx-h-16",
+      "hx-h-2",
+      "hx-h-3.5",
+      "hx-h-4",
+      "hx-h-5",
+      "hx-h-7",
+      "hx-h-[18px]",
+      "hx-h-full",
+      "hx-hidden",
+      "hx-inline",
+      "hx-inline-block",
+      "hx-inline-flex",
+      "hx-inset-0",
+      "hx-inset-x-0",
+      "hx-inset-y-0",
+      "hx-items-center",
+      "hx-items-start",
+      "hx-justify-between",
+      "hx-justify-center",
+      "hx-justify-end",
+      "hx-justify-items-start",
+      "hx-justify-start",
+      "hx-leading-5",
+      "hx-leading-6",
+      "hx-leading-7",
+      "hx-leading-none",
+      "hx-leading-tight",
+      "hx-left-[24px]",
+      "hx-left-[36px]",
+      "hx-line-clamp-3",
+      "hx-list-none",
+      "hx-m-[11px]",
+      "hx-max-h-64",
+      "hx-max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))]",
+      "hx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
+      "hx-max-w-6xl",
+      "hx-max-w-[50%]",
+      "hx-max-w-[90rem]",
+      "hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "hx-max-w-none",
+      "hx-max-w-screen-xl",
+      "hx-mb-10",
+      "hx-mb-12",
+      "hx-mb-16",
+      "hx-mb-2",
+      "hx-mb-4",
+      "hx-mb-6",
+      "hx-mb-8",
+      "hx-min-h-[100px]",
+      "hx-min-h-[calc(100vh-var(--navbar-height))]",
+      "hx-min-w-0",
+      "hx-min-w-[18px]",
+      "hx-min-w-[24px]",
+      "hx-min-w-full",
+      "hx-ml-1",
+      "hx-ml-4",
+      "hx-mr-1",
+      "hx-mr-2",
+      "hx-mt-1",
+      "hx-mt-1.5",
+      "hx-mt-12",
+      "hx-mt-16",
+      "hx-mt-2",
+      "hx-mt-4",
+      "hx-mt-5",
+      "hx-mt-6",
+      "hx-mt-8",
+      "hx-mx-1",
+      "hx-mx-2",
+      "hx-mx-4",
+      "hx-mx-auto",
+      "hx-my-1.5",
+      "hx-my-2",
+      "hx-no-underline",
+      "hx-opacity-0",
+      "hx-opacity-50",
+      "hx-opacity-80",
+      "hx-order-last",
+      "hx-origin-center",
+      "hx-overflow-auto",
+      "hx-overflow-hidden",
+      "hx-overflow-x-auto",
+      "hx-overflow-x-hidden",
+      "hx-overflow-y-auto",
+      "hx-overscroll-contain",
+      "hx-p-0.5",
+      "hx-p-1",
+      "hx-p-1.5",
+      "hx-p-2",
+      "hx-p-4",
+      "hx-p-6",
+      "hx-pb-8",
+      "hx-pb-[env(safe-area-inset-bottom)]",
+      "hx-pb-px",
+      "hx-pl-5",
+      "hx-pl-6",
+      "hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
+      "hx-pointer-events-none",
+      "hx-pr-2",
+      "hx-pr-4",
+      "hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+      "hx-pr-[max(env(safe-area-inset-left),1.5rem)]",
+      "hx-pr-[max(env(safe-area-inset-right),1.5rem)]",
+      "hx-pt-4",
+      "hx-pt-6",
+      "hx-pt-8",
+      "hx-px-1.5",
+      "hx-px-2",
+      "hx-px-3",
+      "hx-px-4",
+      "hx-px-6",
+      "hx-py-1",
+      "hx-py-1.5",
+      "hx-py-12",
+      "hx-py-2",
+      "hx-py-2.5",
+      "hx-py-3",
+      "hx-py-4",
+      "hx-relative",
+      "hx-right-0",
+      "hx-ring-1",
+      "hx-ring-black/5",
+      "hx-rounded",
+      "hx-rounded-3xl",
+      "hx-rounded-full",
+      "hx-rounded-lg",
+      "hx-rounded-md",
+      "hx-rounded-sm",
+      "hx-rounded-t",
+      "hx-rounded-xl",
+      "hx-scroll-my-6",
+      "hx-scroll-py-6",
+      "hx-select-none",
+      "hx-shadow",
+      "hx-shadow-[0_-12px_16px_#fff]",
+      "hx-shadow-[0_-12px_16px_white]",
+      "hx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",
+      "hx-shadow-gray-100",
+      "hx-shadow-lg",
+      "hx-shadow-sm",
+      "hx-shadow-xl",
+      "hx-shrink-0",
+      "hx-sr-only",
+      "hx-sticky",
+      "hx-text-2xl",
+      "hx-text-4xl",
+      "hx-text-[10px]",
+      "hx-text-[color:hsl(var(--primary-hue),100%,50%)]",
+      "hx-text-base",
+      "hx-text-blue-900",
+      "hx-text-center",
+      "hx-text-current",
+      "hx-text-ellipsis",
+      "hx-text-gray-100",
+      "hx-text-gray-500",
+      "hx-text-gray-600",
+      "hx-text-gray-700",
+      "hx-text-gray-800",
+      "hx-text-gray-900",
+      "hx-text-left",
+      "hx-text-lg",
+      "hx-text-orange-800",
+      "hx-text-primary-800",
+      "hx-text-red-900",
+      "hx-text-slate-900",
+      "hx-text-sm",
+      "hx-text-transparent",
+      "hx-text-white",
+      "hx-text-xl",
+      "hx-text-xs",
+      "hx-text-yellow-900",
+      "hx-to-gray-600",
+      "hx-top-0",
+      "hx-top-16",
+      "hx-top-8",
+      "hx-top-[40%]",
+      "hx-top-full",
+      "hx-tracking-tight",
+      "hx-tracking-tighter",
+      "hx-transition",
+      "hx-transition-all",
+      "hx-transition-colors",
+      "hx-transition-opacity",
+      "hx-transition-transform",
+      "hx-underline",
+      "hx-underline-offset-2",
+      "hx-w-2",
+      "hx-w-3.5",
+      "hx-w-4",
+      "hx-w-64",
+      "hx-w-[110%]",
+      "hx-w-[180%]",
+      "hx-w-full",
+      "hx-w-max",
+      "hx-w-screen",
+      "hx-whitespace-nowrap",
+      "hx-z-10",
+      "hx-z-20",
+      "hx-z-[-1]",
       "icon",
-      "inline",
-      "inline-block",
-      "inline-flex",
-      "inset-0",
-      "inset-x-0",
-      "inset-y-0",
-      "items-center",
-      "items-start",
-      "justify-between",
-      "justify-center",
-      "justify-end",
-      "justify-items-start",
-      "justify-start",
       "language-options",
       "language-switcher",
-      "last-of-type:mb-0",
-      "leading-5",
-      "leading-6",
-      "leading-7",
-      "leading-none",
-      "leading-tight",
-      "left-[24px]",
-      "left-[36px]",
-      "lg:grid-cols-3",
-      "line-clamp-3",
-      "list-none",
+      "last-of-type:hx-mb-0",
+      "lg:hx-grid-cols-3",
       "lntable",
       "lntd",
-      "ltr:-mr-4",
-      "ltr:before:left-0",
-      "ltr:md:left-auto",
-      "ltr:ml-3",
-      "ltr:ml-auto",
-      "ltr:mr-auto",
-      "ltr:pl-12",
-      "ltr:pl-16",
-      "ltr:pl-3",
-      "ltr:pl-4",
-      "ltr:pl-8",
-      "ltr:pr-0",
-      "ltr:pr-2",
-      "ltr:pr-4",
-      "ltr:pr-9",
-      "ltr:right-1.5",
-      "ltr:right-3",
-      "ltr:rotate-180",
-      "ltr:text-right",
-      "m-[11px]",
-      "max-h-64",
-      "max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))]",
-      "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
-      "max-lg:min-h-[340px]",
+      "ltr:before:hx-left-0",
+      "ltr:hx--mr-4",
+      "ltr:hx-ml-3",
+      "ltr:hx-ml-auto",
+      "ltr:hx-mr-auto",
+      "ltr:hx-pl-12",
+      "ltr:hx-pl-16",
+      "ltr:hx-pl-3",
+      "ltr:hx-pl-4",
+      "ltr:hx-pl-8",
+      "ltr:hx-pr-0",
+      "ltr:hx-pr-2",
+      "ltr:hx-pr-4",
+      "ltr:hx-pr-9",
+      "ltr:hx-right-1.5",
+      "ltr:hx-right-3",
+      "ltr:hx-rotate-180",
+      "ltr:hx-text-right",
+      "ltr:md:hx-left-auto",
+      "max-lg:hx-min-h-[340px]",
       "max-md:[transform:translate3d(0,-100%,0)]",
-      "max-md:hidden",
-      "max-md:min-h-[340px]",
-      "max-w-6xl",
-      "max-w-[50%]",
-      "max-w-[90rem]",
-      "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
-      "max-w-none",
-      "max-w-screen-xl",
-      "max-xl:hidden",
-      "mb-10",
-      "mb-12",
-      "mb-16",
-      "mb-2",
-      "mb-4",
-      "mb-6",
-      "mb-8",
-      "md:aspect-[1.1/1]",
-      "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
-      "md:hidden",
-      "md:inline-block",
-      "md:justify-start",
-      "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
-      "md:pt-12",
-      "md:px-12",
-      "md:self-start",
-      "md:shrink-0",
-      "md:sticky",
-      "md:text-5xl",
-      "md:text-lg",
-      "md:text-sm",
-      "md:top-16",
-      "md:w-64",
+      "max-md:hx-hidden",
+      "max-md:hx-min-h-[340px]",
+      "max-xl:hx-hidden",
+      "md:hx-aspect-[1.1/1]",
+      "md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
+      "md:hx-hidden",
+      "md:hx-inline-block",
+      "md:hx-justify-start",
+      "md:hx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
+      "md:hx-pt-12",
+      "md:hx-px-12",
+      "md:hx-self-start",
+      "md:hx-shrink-0",
+      "md:hx-sticky",
+      "md:hx-text-5xl",
+      "md:hx-text-lg",
+      "md:hx-text-sm",
+      "md:hx-top-16",
+      "md:hx-w-64",
       "mermaid",
-      "min-h-[100px]",
-      "min-h-[calc(100vh-var(--navbar-height))]",
-      "min-w-0",
-      "min-w-[18px]",
-      "min-w-[24px]",
-      "min-w-full",
-      "ml-1",
-      "ml-4",
       "mobile-menu-overlay",
-      "mr-1",
-      "mr-2",
-      "mt-1",
-      "mt-1.5",
-      "mt-12",
-      "mt-16",
-      "mt-2",
-      "mt-4",
-      "mt-5",
-      "mt-6",
-      "mt-8",
-      "mx-1",
-      "mx-2",
-      "mx-4",
-      "mx-auto",
-      "my-1.5",
-      "my-2",
       "nav-container",
       "nav-container-blur",
       "next-error-h1",
-      "no-underline",
       "not-prose",
-      "opacity-0",
-      "opacity-50",
-      "opacity-80",
       "open",
-      "order-last",
-      "origin-center",
-      "overflow-auto",
-      "overflow-hidden",
-      "overflow-x-auto",
-      "overflow-x-hidden",
-      "overflow-y-auto",
-      "overscroll-contain",
-      "p-0.5",
-      "p-1",
-      "p-1.5",
-      "p-2",
-      "p-4",
-      "p-6",
-      "pb-8",
-      "pb-[env(safe-area-inset-bottom)]",
-      "pb-px",
-      "pl-5",
-      "pl-6",
-      "pl-[max(env(safe-area-inset-left),1.5rem)]",
-      "placeholder:text-gray-500",
-      "pointer-events-none",
-      "pr-2",
-      "pr-4",
-      "pr-[calc(env(safe-area-inset-right)-1.5rem)]",
-      "pr-[max(env(safe-area-inset-left),1.5rem)]",
-      "pr-[max(env(safe-area-inset-right),1.5rem)]",
-      "print:bg-transparent",
-      "print:hidden",
-      "pt-4",
-      "pt-6",
-      "pt-8",
-      "px-1.5",
-      "px-2",
-      "px-3",
-      "px-4",
-      "px-6",
-      "py-1",
-      "py-1.5",
-      "py-12",
-      "py-2",
-      "py-2.5",
-      "py-3",
-      "py-4",
-      "relative",
-      "right-0",
-      "ring-1",
-      "ring-black/5",
-      "rounded",
-      "rounded-3xl",
-      "rounded-full",
-      "rounded-lg",
-      "rounded-md",
-      "rounded-sm",
-      "rounded-t",
-      "rounded-xl",
-      "rtl:-ml-4",
-      "rtl:-rotate-180",
-      "rtl:before:right-0",
-      "rtl:before:rotate-180",
-      "rtl:left-1.5",
-      "rtl:left-3",
-      "rtl:md:right-auto",
-      "rtl:ml-auto",
-      "rtl:mr-3",
-      "rtl:mr-auto",
-      "rtl:pl-2",
-      "rtl:pl-4",
-      "rtl:pl-9",
-      "rtl:pr-12",
-      "rtl:pr-16",
-      "rtl:pr-3",
-      "rtl:pr-4",
-      "rtl:pr-8",
-      "rtl:text-left",
-      "scroll-my-6",
-      "scroll-py-6",
+      "placeholder:hx-text-gray-500",
+      "print:hx-bg-transparent",
+      "print:hx-hidden",
+      "rtl:-hx-rotate-180",
+      "rtl:before:hx-right-0",
+      "rtl:before:hx-rotate-180",
+      "rtl:hx--ml-4",
+      "rtl:hx-left-1.5",
+      "rtl:hx-left-3",
+      "rtl:hx-ml-auto",
+      "rtl:hx-mr-3",
+      "rtl:hx-mr-auto",
+      "rtl:hx-pl-2",
+      "rtl:hx-pl-4",
+      "rtl:hx-pl-9",
+      "rtl:hx-pr-12",
+      "rtl:hx-pr-16",
+      "rtl:hx-pr-3",
+      "rtl:hx-pr-4",
+      "rtl:hx-pr-8",
+      "rtl:hx-text-left",
+      "rtl:md:hx-right-auto",
       "search-input",
       "search-results",
       "search-wrapper",
-      "select-none",
-      "shadow",
-      "shadow-[0_-12px_16px_#fff]",
-      "shadow-[0_-12px_16px_white]",
-      "shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]",
-      "shadow-gray-100",
-      "shadow-lg",
-      "shadow-sm",
-      "shadow-xl",
-      "shrink-0",
       "sidebar-active-item",
       "sidebar-container",
-      "sm:block",
-      "sm:flex",
-      "sm:grid-cols-2",
-      "sm:items-start",
-      "sm:text-xl",
-      "sm:w-[110%]",
-      "sr-only",
+      "sm:hx-block",
+      "sm:hx-flex",
+      "sm:hx-grid-cols-2",
+      "sm:hx-items-start",
+      "sm:hx-text-xl",
+      "sm:hx-w-[110%]",
       "steps",
-      "sticky",
       "subheading-anchor",
       "success-icon",
       "tabs-panel",
       "tabs-toggle",
-      "text-2xl",
-      "text-4xl",
-      "text-[10px]",
-      "text-[color:hsl(var(--primary-hue),100%,50%)]",
-      "text-base",
-      "text-blue-900",
-      "text-center",
-      "text-current",
-      "text-ellipsis",
-      "text-gray-100",
-      "text-gray-500",
-      "text-gray-600",
-      "text-gray-700",
-      "text-gray-800",
-      "text-gray-900",
-      "text-left",
-      "text-lg",
-      "text-orange-800",
-      "text-primary-800",
-      "text-red-900",
-      "text-slate-900",
-      "text-sm",
-      "text-transparent",
-      "text-white",
-      "text-xl",
-      "text-xs",
-      "text-yellow-900",
       "theme-toggle",
-      "to-gray-600",
-      "top-0",
-      "top-16",
-      "top-8",
-      "top-[40%]",
-      "top-full",
-      "tracking-tight",
-      "tracking-tighter",
-      "transition",
-      "transition-all",
-      "transition-colors",
-      "transition-opacity",
-      "transition-transform",
-      "underline",
-      "underline-offset-2",
-      "w-2",
-      "w-3.5",
-      "w-4",
-      "w-64",
-      "w-[110%]",
-      "w-[180%]",
-      "w-full",
-      "w-max",
-      "w-screen",
-      "whitespace-nowrap",
-      "xl:block",
-      "z-10",
-      "z-20",
-      "z-[-1]"
+      "xl:hx-block"
     ],
     "ids": null
   }
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
index fc15febe..314d679f 100644
--- a/layouts/_default/_markup/render-codeblock-mermaid.html
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -1,4 +1,4 @@
-<pre class="mermaid mt-6">
+<pre class="mermaid hx-mt-6">
   {{- .Inner | safeHTML -}}
 </pre>
 {{- .Page.Store.Set "hasMermaid" true -}}
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index 1e23bd91..46e9ed6d 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -4,7 +4,7 @@
 {{- $copyCode := (T "copyCode") | default "Copy code" -}}
 
 
-<div class="code-block relative mt-6 first:mt-0 group/code">
+<div class="code-block hx-relative hx-mt-6 first:hx-mt-0 group/code">
   {{- if $filename -}}
     <div class="filename">{{ $filename }}</div>
   {{- end -}}
@@ -13,13 +13,13 @@
   {{- else -}}
     <pre><code>{{ .Inner }}</code></pre>
   {{- end -}}
-  <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
+  <div class="hx-opacity-0 hx-transition group-hover/code:hx-opacity-100 hx-flex hx-gap-1 hx-absolute hx-m-[11px] hx-right-0 {{ if $filename }}hx-top-8{{ else }}hx-top-0{{ end }}">
     <button
-      class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50"
+      class="code-copy-btn group/copybtn hx-transition-all active:hx-opacity-50 hx-bg-primary-700/5 hx-border hx-border-black/5 hx-text-gray-600 hover:hx-text-gray-900 hx-rounded-md hx-p-1.5 dark:hx-bg-primary-300/10 dark:hx-border-white/10 dark:hx-text-gray-400 dark:hover:hx-text-gray-50"
       title="{{ $copyCode }}"
     >
-      <div class="group-[.copied]/copybtn:hidden copy-icon pointer-events-none h-4 w-4"></div>
-      <div class="hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4"></div>
+      <div class="copy-icon group-[.copied]/copybtn:hx-hidden hx-pointer-events-none hx-h-4 hx-w-4"></div>
+      <div class="success-icon hx-hidden group-[.copied]/copybtn:hx-block hx-pointer-events-none hx-h-4 hx-w-4"></div>
     </button>
   </div>
 </div>
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index a6f836a9..45c63a59 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,7 +1,7 @@
 <h{{ .Level }}>
   {{- .Text | safeHTML -}}
   {{- if gt .Level 1 -}}
-    <span class="absolute -mt-20" id="{{ .Anchor | safeURL }}"></span>
+    <span class="hx-absolute -hx-mt-20" id="{{ .Anchor | safeURL }}"></span>
     <a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="Permalink for this section"></a>
   {{- end -}}
 </h{{ .Level }}>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index c7559f70..222dfb6c 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,14 +1,14 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
         <div class="content">
           <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
-        <div class="mt-16"></div>
+        <div class="hx-mt-16"></div>
         {{ partial "components/last-updated.html" . }}
         {{ partial "components/comments.html" . }}
       </main>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 01d98b86..61c49aad 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,16 +1,16 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
-        <br class="mt-1.5 text-sm" />
-        <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
-        <div class="mb-16"></div>
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
+        <br class="hx-mt-1.5 hx-text-sm" />
+        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        <div class="hx-mb-16"></div>
         <div class="content">
           {{ .Content }}
         </div>
-        <div class="mt-16"></div>
+        <div class="hx-mt-16"></div>
         {{ partial "components/comments.html" . }}
       </main>
     </article>
diff --git a/layouts/_default/wide.html b/layouts/_default/wide.html
index 79d8b7cb..8813ced0 100644
--- a/layouts/_default/wide.html
+++ b/layouts/_default/wide.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <div class="mx-auto flex max-w-[90rem]">
+  <div class="hx-mx-auto hx-flex hx-max-w-[90rem]">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
-    <article class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pt-4 pb-8 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
-      <br class="mt-1.5 text-sm" />
-      <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
+    <article class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pt-4 hx-pb-8 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
+      <br class="hx-mt-1.5 hx-text-sm" />
+      <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
       <div class="content">
         {{ .Content }}
       </div>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index b22de2ec..376d5bc0 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -1,33 +1,33 @@
 {{ define "main" }}
   {{- $readMore := (T "readMore") | default "Read more →" -}}
-  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
+  <div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
-        <br class="mt-1.5 text-sm" />
-        <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
+        <br class="hx-mt-1.5 hx-text-sm" />
+        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
         <div class="content">{{ .Content }}</div>
         {{ range .Pages.ByDate.Reverse }}
-          <div class="mb-10">
-            <h3><a style="color: inherit; text-decoration: none;" class="block font-semibold mt-8 text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+          <div class="hx-mb-10">
+            <h3><a style="color: inherit; text-decoration: none;" class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl " href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
             {{- if site.Params.blog.list.displayTags -}}
               {{ with .Params.tags }}
-                <p class="opacity-50 text-sm leading-7">
-                  {{- range . }}<a class="inline-block mr-2">#{{ . }}</a>{{ end -}}
+                <p class="hx-opacity-50 hx-text-sm hx-leading-7">
+                  {{- range . }}<a class="hx-inline-block hx-mr-2">#{{ . }}</a>{{ end -}}
                 </p>
               {{ end -}}
             {{- end -}}
-            <p class="opacity-80 mt-4 leading-7">{{- partial "utils/page-description" . -}}</p>
-            <p class="opacity-80 mt-1 leading-7">
-              <a class="text-[color:hsl(var(--primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font" href="{{ .RelPermalink }}">
+            <p class="hx-opacity-80 hx-mt-4 hx-leading-7">{{- partial "utils/page-description" . -}}</p>
+            <p class="hx-opacity-80 hx-mt-1 hx-leading-7">
+              <a class="hx-text-[color:hsl(var(--primary-hue),100%,50%)] hx-underline hx-underline-offset-2 hx-decoration-from-font" href="{{ .RelPermalink }}">
                 {{- $readMore -}}
               </a>
             </p>
-            <p class="opacity-50 text-sm mt-4 leading-7">{{ partial "utils/format-date" .Date }}</p>
+            <p class="hx-opacity-50 hx-text-sm hx-mt-4 hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
           </div>
         {{ end }}
       </main>
     </article>
-    <div class="max-xl:hidden h-0 w-64 shrink-0"></div>
+    <div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>
   </div>
 {{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index db831231..2a637a41 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -1,22 +1,22 @@
 {{ define "main" }}
-  <div class="mx-auto flex {{ partial `utils/page-width` . }}">
+  <div class="hx-mx-auto hx-flex {{ partial `utils/page-width` . }}">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
         {{ partial "breadcrumb.html" . }}
-        <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
-        <div class="mt-4 mb-16 text-gray-500 text-sm flex items-center flex-wrap gap-y-2">
-          {{- with $date := .Date }}<span class="mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
+        <h1 class="hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
+        <div class="hx-mt-4 hx-mb-16 hx-text-gray-500 hx-text-sm hx-flex hx-items-center hx-flex-wrap hx-gap-y-2">
+          {{- with $date := .Date }}<span class="hx-mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
           {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
-          {{ if and .Date .Params.authors }}<span class="mx-1">·</span>{{ end -}}
+          {{ if and .Date .Params.authors }}<span class="hx-mx-1">·</span>{{ end -}}
           {{- with $.Params.authors -}}
             {{- range $i, $author := . -}}
               {{- if reflect.IsMap $author -}}
-                {{- if and $i (not $author.image) }}<span class="mr-1">,</span>{{ end -}}
+                {{- if and $i (not $author.image) }}<span class="hx-mr-1">,</span>{{ end -}}
                 <a
                   {{ with $author.link }}href="{{ . }}" target="_blank"{{ end }}
-                  class="group inline-flex items-center text-current gap-x-1.5 mx-1"
+                  class="hx-group hx-inline-flex hx-items-center hx-text-current hx-gap-x-1.5 hx-mx-1"
                   {{ with $author.name }}title="{{ . }}"{{ end }}
                 >
                   {{- with $image := $author.image }}
@@ -25,12 +25,12 @@ <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate
                     {{- if and $isLocal $startsWithSlash }}
                       {{- $image = (relURL (strings.TrimPrefix "/" $image)) -}}
                     {{ end -}}
-                    <img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="inline-block h-4 w-4 rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
+                    <img src="{{ $image | safeURL }}" alt="{{ $author.name }}" class="hx-inline-block hx-h-4 hx-w-4 hx-rounded-full" {{ if $lazyLoading }}loading="lazy"{{ end }} />
                   {{ end -}}
-                  <div class="group-hover:underline">{{ $author.name }}</div>
+                  <div class="group-hover:hx-underline">{{ $author.name }}</div>
                 </a>
               {{- else -}}
-                {{- if $i }}<span class="mr-1">,</span>{{ end -}}<span class="mx-1">{{ $author }}</span>
+                {{- if $i }}<span class="hx-mr-1">,</span>{{ end -}}<span class="hx-mx-1">{{ $author }}</span>
               {{- end -}}
             {{- end -}}
           {{- end -}}
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 5ffe82b8..a91882ae 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
         {{ partial "breadcrumb.html" . }}
         <div class="content">
           <h1>{{ .Title }}</h1>
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 5ffe82b8..a91882ae 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
         {{ partial "breadcrumb.html" . }}
         <div class="content">
           <h1>{{ .Title }}</h1>
diff --git a/layouts/hextra-home.html b/layouts/hextra-home.html
index 0ba7c647..54d792df 100644
--- a/layouts/hextra-home.html
+++ b/layouts/hextra-home.html
@@ -1,8 +1,8 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
-    <div class="w-full break-words min-h-[calc(100vh-var(--navbar-height))] min-w-0 pb-8 pt-8 md:pt-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-left),1.5rem)]">
-      <div class="flex flex-col items-start">
+    <div class="hx-w-full hx-break-words hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-pb-8 hx-pt-8 md:hx-pt-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-left),1.5rem)]">
+      <div class="hx-flex hx-flex-col hx-items-start">
         {{ .Content }}
       </div>
     </div>
diff --git a/layouts/index.html b/layouts/index.html
index 69cf277f..58e3bc96 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,10 +1,10 @@
 {{ define "main" }}
-  <div class='mx-auto flex {{ partial "utils/page-width" . }}'>
+  <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
-    <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
-        <h1 class="text-center mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{{ .Title }}</h1>
+    <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
+        <h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>
         <div class="content">
           {{ .Content }}
         </div>
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
index 5470b2df..5b1042ed 100644
--- a/layouts/partials/breadcrumb.html
+++ b/layouts/partials/breadcrumb.html
@@ -1,13 +1,13 @@
-<div class="mt-1.5 flex items-center gap-1 overflow-hidden text-sm text-gray-500 dark:text-gray-400 contrast-more:text-current">
+<div class="hx-mt-1.5 hx-flex hx-items-center hx-gap-1 hx-overflow-hidden hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 contrast-more:hx-text-current">
   {{- range .Ancestors.Reverse }}
     {{- if not .IsHome }}
-      <div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis hover:text-gray-900 dark:hover:text-gray-100">
+      <div class="hx-whitespace-nowrap hx-transition-colors hx-min-w-[24px] hx-overflow-hidden hx-text-ellipsis hover:hx-text-gray-900 dark:hover:hx-text-gray-100">
         <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
       </div>
-      {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0 rtl:-rotate-180\"") -}}
+      {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-w-3.5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
     {{ end -}}
   {{ end -}}
-  <div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
+  <div class="hx-whitespace-nowrap hx-transition-colors hx-font-medium hx-text-gray-700 contrast-more:hx-font-bold contrast-more:hx-text-current dark:hx-text-gray-100 contrast-more:dark:hx-text-current">
     {{- .LinkTitle -}}
   </div>
 </div>
diff --git a/layouts/partials/components/last-updated.html b/layouts/partials/components/last-updated.html
index b7df01e6..7918fb12 100644
--- a/layouts/partials/components/last-updated.html
+++ b/layouts/partials/components/last-updated.html
@@ -3,10 +3,10 @@
 {{- if site.Params.displayUpdatedDate -}}
   {{- with .Lastmod -}}
     {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
-    <div class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+    <div class="hx-mt-12 hx-mb-8 hx-block hx-text-xs hx-text-gray-500 ltr:hx-text-right rtl:hx-text-left dark:hx-text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
   {{- else -}}
-    <div class="mt-16"></div>
+    <div class="hx-mt-16"></div>
   {{- end -}}
 {{- else -}}
-  <div class="mt-16"></div>
+  <div class="hx-mt-16"></div>
 {{- end -}}
diff --git a/layouts/partials/components/pager.html b/layouts/partials/components/pager.html
index 35001c7b..cae58f5b 100644
--- a/layouts/partials/components/pager.html
+++ b/layouts/partials/components/pager.html
@@ -26,14 +26,14 @@
 {{- end -}}
 
 {{- if or $prev $next -}}
-  <div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
+  <div class="hx-mb-8 hx-flex hx-items-center hx-border-t hx-pt-8 dark:hx-border-neutral-800 contrast-more:hx-border-neutral-400 dark:contrast-more:hx-border-neutral-400 print:hx-hidden">
     {{- if $prev -}}
       <a
         href="{{ $prev.RelPermalink }}"
         title="{{ $prev.LinkTitle }}"
-        class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4"
+        class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-pr-4 rtl:hx-pl-4"
       >
-        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 ltr:hx-rotate-180\"") -}}
         {{- $prev.LinkTitle -}}
       </a>
     {{- end -}}
@@ -41,10 +41,10 @@
       <a
         href="{{ $next.RelPermalink }}"
         title="{{ $next.LinkTitle }}"
-        class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left"
+        class="hx-flex hx-max-w-[50%] hx-items-center hx-gap-1 hx-py-4 hx-text-base hx-font-medium hx-text-gray-600 hx-transition-colors [word-break:break-word] hover:hx-text-primary-600 dark:hx-text-gray-300 md:hx-text-lg ltr:hx-ml-auto ltr:hx-pl-4 ltr:hx-text-right rtl:hx-mr-auto rtl:hx-pr-4 rtl:hx-text-left"
       >
         {{- $next.LinkTitle -}}
-        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 rtl:-rotate-180\"") -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx-inline hx-h-5 hx-shrink-0 rtl:-hx-rotate-180\"") -}}
       </a>
     {{- end -}}
   </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 9e8a7429..72bef07c 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -4,42 +4,42 @@
 {{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
 {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
 
-{{- $footerWidth := "max-w-screen-xl" -}}
+{{- $footerWidth := "hx-max-w-screen-xl" -}}
 {{- with .Site.Params.footer.width -}}
   {{ if eq . "wide" -}}
-    {{ $footerWidth = "max-w-[90rem]" -}}
+    {{ $footerWidth = "hx-max-w-[90rem]" -}}
   {{ else if eq . "full" -}}
     {{ $footerWidth = "max-w-full" -}}
   {{ end -}}
 {{- end -}}
 
 
-<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
+<footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
   {{- if $enableFooterSwitches -}}
-    <div class="mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}">
+    <div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
       {{- partial "language-switch.html" (dict "context" .) -}}
       {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
     </div>
     {{- if or site.IsMultiLingual $displayThemeToggle -}}
-      <hr class="dark:border-neutral-800" />
+      <hr class="dark:hx-border-neutral-800" />
     {{- end -}}
   {{- end -}}
   <div
-    class="{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
+    class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start"
   >
-    <div class="flex w-full flex-col items-center sm:items-start">
-      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
-      {{- if .Site.Params.footer.displayCopyright }}<div class="mt-6 text-xs">{{ $copyright | markdownify }}</div>{{ end }}
+    <div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start">
+      {{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
+      {{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
     </div>
   </div>
 </footer>
 
 {{- define "theme-credit" -}}
-  <a class="flex text-sm items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
+  <a class="hx-flex hx-text-sm hx-items-center hx-gap-1 hx-text-current" target="_blank" rel="noopener noreferrer" title="Hextra GitHub Homepage" href="https://github.com/imfing/hextra">
     <span>
       {{- . | markdownify -}}
       {{- if strings.Contains . "Hextra" -}}
-        {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="inline-block ml-1 align-[-2.5px]"`) -}}
+        {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx-inline-block hx-ml-1 hx-align-[-2.5px]"`) -}}
       {{- end -}}
     </span>
   </a>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c42e2dee..ebaab67a 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,7 +16,7 @@
     {{ end -}}
   </title>
   <meta name="description" content="{{ partial "utils/page-description.html" . }}" />
-  
+
   {{ with .Params.canonical }}
     <link rel="canonical" href="{{ . }}" itemprop="url" />
   {{ else }}
diff --git a/layouts/partials/language-switch.html b/layouts/partials/language-switch.html
index 3dd652fc..6326c598 100644
--- a/layouts/partials/language-switch.html
+++ b/layouts/partials/language-switch.html
@@ -6,33 +6,33 @@
 {{- $changeLanguage := (T "changeLanguage") | default "Change language" -}}
 
 {{- if site.IsMultiLingual -}}
-  <div class="flex justify-items-start {{ if $grow }}grow{{ end }}">
+  <div class="hx-flex hx-justify-items-start {{ if $grow }}hx-grow{{ end }}">
     <button
       title="{{ $changeLanguage }}"
       data-state="closed"
-      class="language-switcher h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 grow"
+      class="language-switcher hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 hx-grow"
       type="button"
       aria-label="{{ $changeLanguage }}"
     >
-      <div class="flex items-center gap-2 capitalize">
+      <div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
         {{- partial "utils/icon" (dict "name" "globe-alt" "attributes" "height=12") -}}
         {{- if not $hideLabel }}<span>{{ site.Language.LanguageName }}</span>{{ end -}}
       </div>
     </button>
     <ul
-      class="language-options hidden z-20 max-h-64 overflow-auto rounded-md ring-1 ring-black/5 bg-white py-1 text-sm shadow-lg dark:ring-white/20 dark:bg-neutral-800"
+      class="language-options hx-hidden hx-z-20 hx-max-h-64 hx-overflow-auto hx-rounded-md hx-ring-1 hx-ring-black/5 hx-bg-white hx-py-1 hx-text-sm hx-shadow-lg dark:hx-ring-white/20 dark:hx-bg-neutral-800"
       style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
     >
       {{ range site.Languages }}
         {{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
-        <li class="flex flex-col">
+        <li class="hx-flex hx-flex-col">
           <a
             href="{{ $link }}"
-            class="text-gray-800 dark:text-gray-100 hover:bg-primary-50 hover:text-primary-600 hover:dark:bg-primary-500/10 hover:dark:text-primary-600 relative cursor-pointer whitespace-nowrap py-1.5 transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9"
+            class="hx-text-gray-800 dark:hx-text-gray-100 hover:hx-bg-primary-50 hover:hx-text-primary-600 hover:dark:hx-bg-primary-500/10 hover:dark:hx-text-primary-600 hx-relative hx-cursor-pointer hx-whitespace-nowrap hx-py-1.5 hx-transition-colors ltr:hx-pl-3 ltr:hx-pr-9 rtl:hx-pr-3 rtl:hx-pl-9"
           >
             {{- .LanguageName -}}
             {{- if eq .LanguageName site.Language.LanguageName -}}
-              <span class="absolute inset-y-0 flex items-center ltr:right-3 rtl:left-3">
+              <span class="hx-absolute hx-inset-y-0 hx-flex hx-items-center ltr:hx-right-3 rtl:hx-left-3">
                 {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
               </span>
             {{- end -}}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index ccf781c3..04adb27e 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -4,26 +4,26 @@
 {{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
 {{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
 
-{{- $navWidth := "max-w-[90rem]" -}}
+{{- $navWidth := "hx-max-w-[90rem]" -}}
 {{- with .Site.Params.navbar.width -}}
   {{ if eq . "normal" -}}
-    {{ $navWidth = "max-w-screen-xl" -}}
+    {{ $navWidth = "hx-max-w-screen-xl" -}}
   {{ else if eq . "full" -}}
     {{ $navWidth = "max-w-full" -}}
   {{ end -}}
 {{- end -}}
 
-<div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
-  <div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
+<div class="nav-container hx-sticky hx-top-0 hx-z-20 hx-w-full hx-bg-transparent print:hx-hidden">
+  <div class="nav-container-blur hx-pointer-events-none hx-absolute hx-z-[-1] hx-h-full hx-w-full hx-bg-white dark:hx-bg-dark hx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:hx-shadow-[0_0_0_1px_#000] dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]"></div>
 
-  <nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 {{ $navWidth }}">
-    <a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
+  <nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}">
+    <a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}">
       {{- if (.Site.Params.navbar.displayLogo | default true) }}
-        <img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
-        <img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
+        <img class="hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
+        <img class="hx-hidden dark:hx-block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
       {{- end }}
       {{- if (.Site.Params.navbar.displayTitle | default true) }}
-        <span class="mx-2 font-extrabold inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
+        <span class="hx-mx-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
       {{- end }}
     </a>
 
@@ -43,27 +43,27 @@
         {{/* Display icon menu item */}}
         {{- if .Params.icon -}}
           {{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }}
-          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
+          <a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
             {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
-            <span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
+            <span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- else -}}
           {{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
-          {{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
+          {{- $activeClass := cond $active "hx-font-medium" "hx-text-gray-600 hover:hx-text-gray-800 dark:hx-text-gray-400 dark:hover:hx-text-gray-200" -}}
           <a
             title="{{ or (T .Identifier) .Name | safeHTML }}"
             href="{{ $link }}"
             {{ if $external }}target="_blank" rel="noreferer"{{ end }}
-            class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
+            class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
           >
-            <span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
+            <span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- end -}}
       {{- end -}}
     {{- end -}}
 
 
-    <button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
+    <button type="button" aria-label="Menu" class="hamburger-menu -hx-mr-2 hx-rounded hx-p-2 active:hx-bg-gray-400/20 md:hx-hidden">
       {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
     </button>
   </nav>
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index 917d9c3e..e421ab00 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -1,17 +1,17 @@
 {{- $placeholder := (T "searchPlaceholder") | default "Search..." -}}
 
 
-<div class="search-wrapper relative md:w-64">
-  <div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
+<div class="search-wrapper hx-relative md:hx-w-64">
+  <div class="hx-relative hx-flex hx-items-center hx-text-gray-900 contrast-more:hx-text-gray-800 dark:hx-text-gray-300 contrast-more:dark:hx-text-gray-300">
     <input
       placeholder="{{ $placeholder }}"
-      class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current"
+      class="search-input hx-block hx-w-full hx-appearance-none hx-rounded-lg hx-px-3 hx-py-2 hx-transition-colors hx-text-base hx-leading-tight md:hx-text-sm hx-bg-black/[.05] dark:hx-bg-gray-50/10 focus:hx-bg-white dark:focus:hx-bg-dark placeholder:hx-text-gray-500 dark:placeholder:hx-text-gray-400 contrast-more:hx-border contrast-more:hx-border-current"
       type="search"
       value=""
       spellcheck="false"
     />
     <kbd
-      class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"
+      class="hx-absolute hx-my-1.5 hx-select-none ltr:hx-right-1.5 rtl:hx-left-1.5 hx-h-5 hx-rounded hx-bg-white hx-px-1.5 hx-font-mono hx-text-[10px] hx-font-medium hx-text-gray-500 hx-border dark:hx-border-gray-100/20 dark:hx-bg-dark/50 contrast-more:hx-border-current contrast-more:hx-text-current contrast-more:dark:hx-border-current hx-items-center hx-gap-1 hx-transition-opacity hx-pointer-events-none hx-hidden sm:hx-flex"
     >
       CTRL K
     </kbd>
@@ -19,7 +19,7 @@
 
   <div>
     <ul
-      class="search-results hextra-scrollbar hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
+      class="search-results hextra-scrollbar hx-hidden hx-border hx-border-gray-200 hx-bg-white hx-text-gray-100 dark:hx-border-neutral-800 dark:hx-bg-neutral-900 hx-absolute hx-top-full hx-z-20 hx-mt-2 hx-overflow-auto hx-overscroll-contain hx-rounded-xl hx-py-2.5 hx-shadow-xl hx-max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:hx-max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx-inset-x-0 ltr:md:hx-left-auto rtl:md:hx-right-auto contrast-more:hx-border contrast-more:hx-border-gray-900 contrast-more:dark:hx-border-gray-50 hx-w-screen hx-min-h-[100px] hx-max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
       style="transition: max-height 0.2s ease 0s;"
     ></ul>
   </div>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index efc85260..65e154c5 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -3,7 +3,7 @@
 {{- $disableSidebar := .disableSidebar | default false -}}
 {{- $displayPlaceholder := .displayPlaceholder | default false -}}
 
-{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}}
+{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}}
 
 {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
 {{- $pageURL := $context.RelPermalink -}}
@@ -15,14 +15,14 @@
 {{- end -}}
 
 
-<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] fixed inset-0 z-10 bg-black/80 dark:bg-black/60 hidden"></div>
-<aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
+<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div>
+<aside class="sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
   <!-- Search bar on small screen -->
-  <div class="px-4 pt-4 md:hidden">
+  <div class="hx-px-4 hx-pt-4 md:hx-hidden">
     {{ partial "search.html" }}
   </div>
-  <div class="hextra-scrollbar overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
-    <ul class="flex flex-col gap-1 md:hidden">
+  <div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
+    <ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
       <!-- Nav -->
       {{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}}
       {{ template "sidebar-footer" }}
@@ -30,27 +30,27 @@
 
     <!-- Sidebar on large screen -->
     {{- if $disableSidebar -}}
-      {{- if $displayPlaceholder }}<div class="max-xl:hidden h-0 w-64 shrink-0"></div>{{ end -}}
+      {{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}}
       {{ .context.Scratch.Set "enableFooterSwitches" true }}
     {{- else -}}
-      <ul class="flex flex-col gap-1 max-md:hidden">
+      <ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
         {{ template "sidebar-main" (dict "context" $navRoot "page" $context  "pageURL" $pageURL) }}
         {{ template "sidebar-footer" }}
       </ul>
     {{ end -}}
   </div>
   {{/* Hide theme switch when sidebar is disabled */}}
-  {{ $switchesClass := cond $disableSidebar "md:hidden" "" -}}
+  {{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
   {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
 
   {{ if or site.IsMultiLingual $displayThemeToggle }}
-    <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}justify-end{{ end }} sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
+    <div class="{{ $switchesClass }} {{ with site.IsMultiLingual }}hx-justify-end{{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t" data-toggle-animation="show">
       {{- with site.IsMultiLingual -}}
         {{- partial "language-switch" (dict "context" $context "grow" true) -}}
         {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
       {{- else -}}
         {{- with $displayThemeToggle -}}
-          <div class="flex grow flex-col">{{ partial "theme-toggle" }}</div>
+          <div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div>
         {{- end -}}
       {{- end -}}
     </div>
@@ -77,8 +77,8 @@
     {{- if eq $level 0 -}}
       {{- range $items.ByWeight }}
         {{- if .Params.sidebar.separator -}}
-          <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
-            <span class="cursor-default">{{ .LinkTitle }}</span>
+          <li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
+            <span class="hx-cursor-default">{{ .LinkTitle }}</span>
           </li>
         {{- else -}}
           {{- $active := eq $pageURL .RelPermalink -}}
@@ -93,13 +93,13 @@
         {{- end -}}
       {{- end -}}
     {{- else -}}
-      <div class="ltr:pr-0 overflow-hidden">
-        <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
+      <div class="ltr:hx-pr-0 hx-overflow-hidden">
+        <ul class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'>
           {{- range $items.ByWeight }}
             {{- $active := eq $pageURL .RelPermalink -}}
             {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
             {{- $title := .LinkTitle | default .File.BaseFileName -}}
-            <li class="flex flex-col {{ if $shouldOpen }}open{{ end }}">
+            <li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
               {{- template "sidebar-item-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
               {{- if and $toc $active -}}
                 {{ template "sidebar-toc" dict "page" . }}
@@ -116,14 +116,14 @@
 {{- define "sidebar-toc" -}}
   {{ $page := .page }}
   {{ with $page.Fragments.Headings }}
-    <ul class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'>
+    <ul class='hx-flex hx-flex-col hx-gap-1 hx-relative before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] dark:before:hx-bg-neutral-800 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-pr-3 rtl:before:hx-right-0 ltr:hx-ml-3 rtl:hx-mr-3'>
       {{- range . }}
         {{- with .Headings }}
           {{- range . -}}
             <li>
               <a
                 href="#{{ anchorize .ID }}"
-                class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
+                class="hx-flex hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [word-break:break-word] hx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:hx-border hx-gap-2 before:hx-opacity-25 before:hx-content-['#'] hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:hx-text-gray-900 contrast-more:dark:hx-text-gray-50 contrast-more:hx-border-transparent contrast-more:hover:hx-border-gray-900 contrast-more:dark:hover:hx-border-gray-50"
               >
                 {{- .Title -}}
               </a>
@@ -139,8 +139,8 @@
   {{- range site.Menus.sidebar -}}
     {{- $name := or (T .Identifier) .Name -}}
     {{ if eq .Params.type "separator" }}
-      <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
-        <span class="cursor-default">{{ $name }}</span>
+      <li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
+        <span class="hx-cursor-default">{{ $name }}</span>
       </li>
     {{ else }}
       <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
@@ -152,11 +152,11 @@
   {{- $external := strings.HasPrefix .link "http" -}}
   {{- $open := .open | default true -}}
   <a
-    class="flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
+    class="hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
     {{- if .active }}
-      sidebar-active-item bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
+      sidebar-active-item hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500
     {{- else }}
-      text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
+      hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50
     {{- end -}}"
     href="{{ .link }}"
     {{ if $external }}target="_blank" rel="noreferer"{{ end }}
@@ -173,5 +173,5 @@
 {{- end -}}
 
 {{- define "sidebar-collapsible-button" -}}
-  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
+  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path></svg>
 {{- end -}}
diff --git a/layouts/partials/theme-toggle.html b/layouts/partials/theme-toggle.html
index 35558c5b..6a939b56 100644
--- a/layouts/partials/theme-toggle.html
+++ b/layouts/partials/theme-toggle.html
@@ -8,14 +8,14 @@
 <button
   title="{{ $changeTheme }}"
   data-theme="light"
-  class="theme-toggle group h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
+  class="theme-toggle hx-group hx-h-7 hx-rounded-md hx-px-2 hx-text-left hx-text-xs hx-font-medium hx-text-gray-600 hx-transition-colors dark:hx-text-gray-400 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50"
   type="button"
   aria-label="{{ $changeTheme }}"
 >
-  <div class="flex items-center gap-2 capitalize">
-    {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
-    {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hidden\"") -}}
-    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
+  <div class="hx-flex hx-items-center hx-gap-2 hx-capitalize">
+    {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"group-data-[theme=light]:hx-hidden\"") -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=light]:hx-hidden">{{ $light }}</span>{{ end -}}
+    {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"group-data-[theme=dark]:hx-hidden\"") -}}
+    {{- if not $hideLabel }}<span class="group-data-[theme=dark]:hx-hidden">{{ $dark }}</span>{{ end -}}
   </div>
 </button>
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index b9417328..5cb04f65 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -5,11 +5,11 @@
 {{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
 {{- $backToTop := (T "backToTop") | default "Scroll to top" -}}
 
-<nav class="hextra-toc order-last hidden w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
+<nav class="hextra-toc hx-order-last hx-hidden hx-w-64 hx-shrink-0 xl:hx-block print:hx-hidden hx-px-4" aria-label="table of contents">
   {{- if $toc }}
-    <div class="hextra-scrollbar sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
+    <div class="hextra-scrollbar hx-sticky hx-top-16 hx-overflow-y-auto hx-pr-4 hx-pt-6 hx-text-sm [hyphens:auto] hx-max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] ltr:hx--mr-4 rtl:hx--ml-4">
       {{- with .Fragments.Headings -}}
-        <p class="mb-4 font-semibold tracking-tight">{{ $onThisPage }}</p>
+        <p class="hx-mb-4 hx-font-semibold hx-tracking-tight">{{ $onThisPage }}</p>
         {{- range . -}}
           <ul>
             {{- with .Headings -}}{{ template "toc-subheading" (dict "headings" . "level" 0) }}{{- end -}}
@@ -17,13 +17,13 @@
         {{- end -}}
       {{- end -}}
 
-      {{- $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" -}}
+      {{- $borderClass := "hx-mt-8 hx-border-t hx-bg-white hx-pt-8 hx-shadow-[0_-12px_16px_white] dark:hx-bg-dark dark:hx-shadow-[0_-12px_16px_#111]" -}}
       {{- if not .Fragments.Headings -}}
         {{- $borderClass = "" -}}
       {{- end -}}
 
       {{/* TOC bottom part */}}
-      <div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
+      <div class="{{ $borderClass }} hx-sticky hx-bottom-0 hx-flex hx-flex-col hx-items-start hx-gap-2 hx-pb-8 dark:hx-border-neutral-800 contrast-more:hx-border-t contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-border-neutral-400">
         {{- if site.Params.editURL.enable -}}
           {{- $editURL := site.Params.editURL.base | default "" -}}
           {{- with .Params.editURL -}}
@@ -38,14 +38,14 @@
               {{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
             {{- end -}}
           {{- end -}}
-          <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
+          <a class="hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferer">{{ $editThisPage }}</a>
         {{- end -}}
         {{/* Scroll To Top */}}
-        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="transition-all transition duration-75 opacity-0 text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50">
+        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx-transition-all hx-duration-75 hx-opacity-0 hx-text-xs hx-font-medium hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-100 contrast-more:hx-text-gray-800 contrast-more:dark:hx-text-gray-50">
           <span>
             {{- $backToTop -}}
           </span>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline ml-1 h-3.5 w-3.5 border rounded-full border-gray-500 hover:border-gray-900 dark:border-gray-400 dark:hover:border-gray-100 contrast-more:border-gray-800 contrast-more:dark:border-gray-50">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx-inline hx-ml-1 hx-h-3.5 hx-w-3.5 hx-border hx-rounded-full hx-border-gray-500 hover:hx-border-gray-900 dark:hx-border-gray-400 dark:hover:hx-border-gray-100 contrast-more:hx-border-gray-800 contrast-more:dark:hx-border-gray-50">
             <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
           </svg>
         </button>
@@ -63,12 +63,12 @@
   {{- end -}}
 
   {{- $padding := (mul $level 4) -}}
-  {{- $class := cond (eq $level 0) "font-semibold" (printf "ltr:pl-%d rtl:pr-%d" $padding $padding) -}}
+  {{- $class := cond (eq $level 0) "hx-font-semibold" (printf "ltr:hx-pl-%d rtl:hx-pr-%d" $padding $padding) -}}
 
   {{- range $headings }}
     {{- if .Title }}
-      <li class="my-2 scroll-my-6 scroll-py-6">
-        <a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 contrast-more:text-gray-900 contrast-more:underline contrast-more:dark:text-gray-50 w-full break-words" href="#{{ anchorize .ID }}">
+      <li class="hx-my-2 hx-scroll-my-6 hx-scroll-py-6">
+        <a class="{{ $class }} hx-inline-block hx-text-gray-500 hover:hx-text-gray-900 dark:hx-text-gray-400 dark:hover:hx-text-gray-300 contrast-more:hx-text-gray-900 contrast-more:hx-underline contrast-more:dark:hx-text-gray-50 hx-w-full hx-break-words" href="#{{ anchorize .ID }}">
           {{- .Title | safeHTML | plainify | htmlUnescape }}
         </a>
       </li>
diff --git a/layouts/partials/utils/page-width.html b/layouts/partials/utils/page-width.html
index 8163300e..317022f1 100644
--- a/layouts/partials/utils/page-width.html
+++ b/layouts/partials/utils/page-width.html
@@ -14,14 +14,14 @@
 
 {{- with $pageWidth -}}
   {{ if eq . "wide" -}}
-    {{ $pageWidth = "max-w-[90rem]" -}}
+    {{ $pageWidth = "hx-max-w-[90rem]" -}}
   {{ else if eq . "full" -}}
     {{ $pageWidth = "max-w-full" -}}
   {{ else -}}
-    {{ $pageWidth = "max-w-screen-xl" -}}
+    {{ $pageWidth = "hx-max-w-screen-xl" -}}
   {{ end -}}
 {{ else -}}
-  {{ $pageWidth = "max-w-screen-xl" -}}
+  {{ $pageWidth = "hx-max-w-screen-xl" -}}
 {{ end -}}
 
 {{ return $pageWidth }}
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html
index 85b9c154..b267be97 100644
--- a/layouts/shortcodes/callout.html
+++ b/layouts/shortcodes/callout.html
@@ -8,29 +8,29 @@
 {{/* Also allow using "icon" */}}
 {{ $icon := .Get "icon" }}
 
-{{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
-{{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
-{{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
-{{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
+{{ $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" }}
+{{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
+{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
+{{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
 
 {{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
 
 
-<div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
-  <div class="ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2">
+<div class="hx-overflow-x-auto hx-mt-6 hx-flex hx-rounded-lg hx-border hx-py-2 ltr:hx-pr-4 rtl:hx-pl-4 contrast-more:hx-border-current contrast-more:dark:hx-border-current {{ $class }}">
+  <div class="ltr:hx-pl-3 ltr:hx-pr-2 rtl:hx-pr-3 rtl:hx-pl-2">
     {{- with $emoji -}}
-      <div class="select-none text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+      <div class="hx-select-none hx-text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
         {{ . }}
       </div>
     {{- else -}}
       {{- with $icon }}
-        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="inline-block align-middle"`) -}}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="hx-inline-block hx-align-middle"`) -}}
       {{- end -}}
     {{- end -}}
   </div>
 
-  <div class="w-full min-w-0 leading-7">
-    <div class="mt-6 leading-7 first:mt-0">
+  <div class="hx-w-full hx-min-w-0 hx-leading-7">
+    <div class="hx-mt-6 hx-leading-7 first:hx-mt-0">
       {{ .Inner | markdownify }}
     </div>
   </div>
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index 7d0e5ac4..d47d6088 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -38,9 +38,9 @@
   {{- end -}}
 {{- end -}}
 
-{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
+{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
 {{- with $image -}}
-  {{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
+  {{ $linkClass = "hover:hx-border-gray-300 hx-bg-gray-100 hx-shadow dark:hx-border-neutral-700 dark:hx-bg-neutral-800 dark:hx-text-gray-50 hover:hx-shadow-lg dark:hover:hx-border-neutral-500 dark:hover:hx-bg-neutral-700" }}
 {{- end -}}
 
 {{- $external := strings.HasPrefix $link "http" -}}
@@ -48,7 +48,7 @@
 
 
 <a
-  class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
+  class="hextra-card hx-group hx-flex hx-flex-col hx-justify-start hx-overflow-hidden hx-rounded-lg hx-border hx-border-gray-200 hx-text-current hx-no-underline dark:hx-shadow-none hover:hx-shadow-gray-100 dark:hover:hx-shadow-none hx-shadow-gray-100 active:hx-shadow-sm active:hx-shadow-gray-200 hx-transition-all hx-duration-200 {{ $linkClass }}"
   {{- if $link -}}
     href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
   {{- end -}}
@@ -65,18 +65,18 @@
     />
   {{- end -}}
 
-  {{- $padding := "p-4" -}}
+  {{- $padding := "hx-p-4" -}}
   {{- with $subtitle -}}
-    {{- $padding = "pt-4 px-4" -}}
+    {{- $padding = "hx-pt-4 hx-px-4" -}}
   {{- end -}}
 
 
-  <span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
+  <span class="hx-flex hx-font-semibold hx-items-start hx-gap-2 {{ $padding }} hx-text-gray-700 hover:hx-text-gray-900 dark:hx-text-neutral-200 dark:hover:hx-text-neutral-50">
     {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
     {{- $title -}}
   </span>
   {{- with $subtitle -}}
-    <div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{- $subtitle | markdownify -}}</div>
+    <div class="hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
   {{- end -}}
 </a>
 {{- /* Strip trailing newline. */ -}}
diff --git a/layouts/shortcodes/cards.html b/layouts/shortcodes/cards.html
index 3e9385ab..7c3f01f1 100644
--- a/layouts/shortcodes/cards.html
+++ b/layouts/shortcodes/cards.html
@@ -1,5 +1,5 @@
 {{ $rows := .Get "rows" | default "3" }}
 
-<div class="hextra-cards mt-4 gap-4 grid not-prose" style="--rows: {{ $rows }};">
+<div class="hextra-cards hx-mt-4 hx-gap-4 hx-grid not-prose" style="--rows: {{ $rows }};">
   {{- .Inner -}}
 </div>
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
index d3250977..78ed9b1f 100644
--- a/layouts/shortcodes/details.html
+++ b/layouts/shortcodes/details.html
@@ -1,11 +1,11 @@
 {{- $title := .Get "title" | default "" -}}
 {{- $closed := eq (.Get "closed") "true" | default false -}}
 
-<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4 group" {{ if not $closed }}open{{ end }}>
-  <summary class="flex items-center cursor-pointer select-none list-none p-1 rounded transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 group-open:before:rotate-90">
-    <strong class="text-lg">{{ $title | markdownify }}</strong>
+<details class="last-of-type:hx-mb-0 hx-rounded-lg hx-bg-neutral-50 dark:hx-bg-neutral-800 hx-p-2 hx-mt-4 hx-group" {{ if not $closed }}open{{ end }}>
+  <summary class="hx-flex hx-items-center hx-cursor-pointer hx-select-none hx-list-none hx-p-1 hx-rounded hx-transition-colors hover:hx-bg-gray-100 dark:hover:hx-bg-neutral-800 before:hx-mr-1 before:hx-inline-block before:hx-transition-transform before:hx-content-[''] dark:before:hx-invert rtl:before:hx-rotate-180 group-open:before:hx-rotate-90">
+    <strong class="hx-text-lg">{{ $title | markdownify }}</strong>
   </summary>
-  <div class="p-2 overflow-hidden">
+  <div class="hx-p-2 hx-overflow-hidden">
     {{ .InnerDeindent | markdownify }}
   </div>
 </details>
diff --git a/layouts/shortcodes/filetree/container.html b/layouts/shortcodes/filetree/container.html
index 39a49bb3..7773ae28 100644
--- a/layouts/shortcodes/filetree/container.html
+++ b/layouts/shortcodes/filetree/container.html
@@ -1,5 +1,5 @@
-<div class="hextra-filetree mt-6 select-none text-sm text-gray-800 dark:text-gray-300 not-prose">
-  <div class="inline-block rounded-lg border px-4 py-2 dark:border-neutral-800">
+<div class="hextra-filetree hx-mt-6 hx-select-none hx-text-sm hx-text-gray-800 dark:hx-text-gray-300 not-prose">
+  <div class="hx-inline-block hx-rounded-lg hx-border hx-px-4 hx-py-2 dark:hx-border-neutral-800">
     {{- .Inner -}}
   </div>
 </div>
diff --git a/layouts/shortcodes/filetree/file.html b/layouts/shortcodes/filetree/file.html
index de0e82d8..363dfd44 100644
--- a/layouts/shortcodes/filetree/file.html
+++ b/layouts/shortcodes/filetree/file.html
@@ -1,9 +1,9 @@
 {{- $name := .Get "name" -}}
 
 
-<li class="flex list-none">
-  <span class="inline-flex cursor-default items-center py-1">
+<li class="hx-flex hx-list-none">
+  <span class="hx-inline-flex hx-cursor-default hx-items-center hx-py-1">
     {{- partial "utils/icon" (dict "name" "document-text" "attributes" "width=1em") -}}
-    <span class="ml-1">{{ $name | markdownify }}</span>
+    <span class="hx-ml-1">{{ $name | markdownify }}</span>
   </span>
 </li>
diff --git a/layouts/shortcodes/filetree/folder.html b/layouts/shortcodes/filetree/folder.html
index c46cc7e2..911e75db 100644
--- a/layouts/shortcodes/filetree/folder.html
+++ b/layouts/shortcodes/filetree/folder.html
@@ -1,17 +1,17 @@
 {{- $name := .Get "name" -}}
 {{- $state := .Get "state" | default "open" }}
 
-<li class="group flex list-none flex-col">
-  <button class="hextra-filetree-folder inline-flex cursor-pointer items-center py-1 hover:opacity-60">
-    <span data-state="{{ $state }}" class="data-[state=open]:hidden">
+<li class="hx-group hx-flex hx-list-none hx-flex-col">
+  <button class="hextra-filetree-folder hx-inline-flex hx-cursor-pointer hx-items-center hx-py-1 hover:hx-opacity-60">
+    <span data-state="{{ $state }}" class="data-[state=open]:hx-hidden">
       {{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
     </span>
-    <span data-state="{{ $state }}" class="data-[state=closed]:hidden">
+    <span data-state="{{ $state }}" class="data-[state=closed]:hx-hidden">
       {{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
     </span>
-    <span class="ml-1">{{ $name }}</span>
+    <span class="hx-ml-1">{{ $name }}</span>
   </button>
-  <ul data-state="{{ $state }}" class="pl-5 data-[state=closed]:hidden">
+  <ul data-state="{{ $state }}" class="hx-pl-5 data-[state=closed]:hx-hidden">
     {{- .Inner -}}
   </ul>
 </li>
diff --git a/layouts/shortcodes/hextra/feature-card.html b/layouts/shortcodes/hextra/feature-card.html
index 0f2aedf5..7e83a13a 100644
--- a/layouts/shortcodes/hextra/feature-card.html
+++ b/layouts/shortcodes/hextra/feature-card.html
@@ -17,20 +17,20 @@
 <a
   {{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
-  class="{{ $class }} hextra-feature-card not-prose block relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
+  class="{{ $class }} hextra-feature-card not-prose hx-block hx-relative hx-overflow-hidden hx-rounded-3xl hx-border hx-border-gray-200 hover:hx-border-gray-300 dark:hx-border-neutral-800 dark:hover:hx-border-neutral-700 before:hx-pointer-events-none before:hx-absolute before:hx-inset-0 before:hx-bg-glass-gradient"
 >
-  <div class="relative w-full p-6">
-    <h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">
+  <div class="hx-relative hx-w-full hx-p-6">
+    <h3 class="hx-text-2xl hx-font-medium hx-leading-6 hx-mb-2 hx-flex hx-items-center">
       {{ with $icon -}}
-        <span class="pr-2">
+        <span class="hx-pr-2">
           {{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}}
         </span>
       {{ end -}}
       <span>{{ $title }}</span>
     </h3>
-    <p class="text-gray-500 dark:text-gray-400 text-sm leading-6">{{ $subtitle | markdownify }}</p>
+    <p class="hx-text-gray-500 dark:hx-text-gray-400 hx-text-sm hx-leading-6">{{ $subtitle | markdownify }}</p>
   </div>
   {{- with $image -}}
-    <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
+    <img src="{{ . }}" class="hx-absolute hx-max-w-none {{ $imageClass }}" alt="{{ $title }}" />
   {{- end -}}
 </a>
diff --git a/layouts/shortcodes/hextra/feature-grid.html b/layouts/shortcodes/hextra/feature-grid.html
index d2d7c1b9..a5819797 100644
--- a/layouts/shortcodes/hextra/feature-grid.html
+++ b/layouts/shortcodes/hextra/feature-grid.html
@@ -2,7 +2,7 @@
 
 
 <div
-  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full not-prose"
+  class="hx-grid sm:hx-grid-cols-2 lg:hx-grid-cols-3 hx-grid-cols-1 hx-gap-4 hx-w-full not-prose"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner }}
diff --git a/layouts/shortcodes/hextra/hero-badge.html b/layouts/shortcodes/hextra/hero-badge.html
index e1c61e4e..411796ec 100644
--- a/layouts/shortcodes/hextra/hero-badge.html
+++ b/layouts/shortcodes/hextra/hero-badge.html
@@ -7,7 +7,7 @@
 
 <a
   {{ if $link }}href="{{ $href }}"{{ end }}
-  class="{{ $class }} not-prose inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
+  class="{{ $class }} not-prose hx-inline-flex hx-items-center hx-rounded-full hx-gap-2 hx-px-3 hx-py-1 hx-text-xs hx-text-gray-600 dark:hx-text-gray-400 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-border-neutral-800 hx-border hover:hx-border-gray-400 dark:hover:hx-text-gray-50 dark:hover:hx-border-gray-600 hx-transition-all hx-ease-in hx-duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >
diff --git a/layouts/shortcodes/hextra/hero-button.html b/layouts/shortcodes/hextra/hero-button.html
index da8d4ceb..fae5ef35 100644
--- a/layouts/shortcodes/hextra/hero-button.html
+++ b/layouts/shortcodes/hextra/hero-button.html
@@ -7,7 +7,7 @@
 
 <a
   href="{{ $href }}"
-  class="not-prose font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
+  class="not-prose hx-font-medium hx-cursor-pointer hx-px-6 hx-py-3 hx-rounded-full hx-text-center hx-text-white hx-inline-block hx-bg-primary-600 hover:hx-bg-primary-700 focus:hx-outline-none focus:hx-ring-4 focus:hx-ring-primary-300 dark:hx-bg-primary-600 dark:hover:hx-bg-primary-700 dark:focus:hx-ring-primary-800 hx-transition-all hx-ease-in hx-duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >
diff --git a/layouts/shortcodes/hextra/hero-headline.html b/layouts/shortcodes/hextra/hero-headline.html
index b2bd0bca..88862a72 100644
--- a/layouts/shortcodes/hextra/hero-headline.html
+++ b/layouts/shortcodes/hextra/hero-headline.html
@@ -2,7 +2,7 @@
 
 
 <h1
-  class="not-prose text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
+  class="not-prose hx-text-4xl hx-font-bold hx-leading-none hx-tracking-tighter md:hx-text-5xl hx-py-2 hx-bg-clip-text hx-text-transparent hx-bg-gradient-to-r hx-from-gray-900 hx-to-gray-600 dark:hx-from-gray-100 dark:hx-to-gray-400"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}
diff --git a/layouts/shortcodes/hextra/hero-subtitle.html b/layouts/shortcodes/hextra/hero-subtitle.html
index 7c2fb7d0..9c646029 100644
--- a/layouts/shortcodes/hextra/hero-subtitle.html
+++ b/layouts/shortcodes/hextra/hero-subtitle.html
@@ -2,7 +2,7 @@
 
 
 <p
-  class="not-prose text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
+  class="not-prose hx-text-xl hx-text-gray-600 dark:hx-text-gray-400 sm:hx-text-xl"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}
diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html
index 59740d16..26dfc2a2 100644
--- a/layouts/shortcodes/icon.html
+++ b/layouts/shortcodes/icon.html
@@ -8,6 +8,6 @@
 
 {{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
 
-<span class="inline-block align-text-bottom icon">
+<span class="hx-inline-block hx-align-text-bottom icon">
   {{- $icon | safeHTML -}}
 </span>
diff --git a/layouts/shortcodes/steps.html b/layouts/shortcodes/steps.html
index 0bfa0f40..bb8ee2a9 100644
--- a/layouts/shortcodes/steps.html
+++ b/layouts/shortcodes/steps.html
@@ -1,3 +1,3 @@
-<div class="steps ml-4 mb-12 border-l border-gray-200 pl-6 dark:border-neutral-800 [counter-reset:step]">
+<div class="steps hx-ml-4 hx-mb-12 hx-border-l hx-border-gray-200 hx-pl-6 dark:hx-border-neutral-800 [counter-reset:step]">
   {{- .Inner -}}
 </div>
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
index 2637ab0a..7d116e91 100644
--- a/layouts/shortcodes/tab.html
+++ b/layouts/shortcodes/tab.html
@@ -1,7 +1,7 @@
 {{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
 
 <div
-  class="tabs-panel rounded pt-6 hidden data-[state=selected]:block"
+  class="tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
   id="tabs-panel-{{ .Ordinal }}"
   role="tabpanel"
   {{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index 7dbabaef..776eb564 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -6,10 +6,10 @@
 {{- end -}}
 
 
-<div class="mt-4 flex w-max min-w-full border-b border-gray-200 pb-px dark:border-neutral-800">
+<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
   {{- range $i, $item := $items -}}
     <button
-      class="tabs-toggle data-[state=selected]:border-primary-500 data-[state=selected]:text-primary-600 mr-2 rounded-t p-2 font-medium leading-5 transition-colors -mb-0.5 select-none border-b-2 border-transparent text-gray-600 hover:border-gray-200 hover:text-black dark:text-gray-200 dark:hover:border-neutral-800 dark:hover:text-white"
+      class="tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
       role="tab"
       type="button"
       aria-controls="tabs-panel-{{ $i }}"
diff --git a/tailwind.config.js b/tailwind.config.js
index 5802de83..2fb85ec0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ const makePrimaryColor =
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  prefix: 'hx-',
   content: [
     './**/hugo_stats.json',
   ],