chore: migrate to Tailwind CSS v4.0 (#632)

* chore: migrate PostCSS configuration to v4

* chore: update dependencies in package.json and package-lock.json

- Bump versions for autoprefixer, postcss, postcss-cli, prettier, and tailwindcss.
- Remove unused dependencies to streamline the project.

* chore: add @tailwindcss/postcss and update package-lock.json

* fix: update import paths in CSS files for consistency

* fix: change prefix from `hx-` to `hx:`

* chore: migrate primary color theme variables to CSS

* fix: remove unnecessary text decoration property from anchor styles in typography CSS

* fix: update CSS styles for improved consistency and clarity across components

* chore: clean up package.json and package-lock.json, remove unused dependencies, and update CSS imports for better organization

* fix: bulk replace prefix `hx-` with `hx:`

* fix: update tailwind css prefix

* fix: styling consistent issues

- steps counter fix in v4
- removed tailwind.css
- update hr border colors
- fix button cursor in v4
- fix border colors in various places

* fix: update class prefixes for consistency in menu and sidebar components

* fix: refine CSS classes and transitions for navbar and sidebar components

- Updated hamburger menu styles for improved animation and structure.
- Adjusted sidebar transition duration for smoother effects.
- Standardized class prefixes for consistency across components.

* fix: update border color in hero badge component for improved styling consistency

* fix: update tab button cursor style for improved user interaction

* chore: recompile css

* fix: dark mode color not applied for before / after elements

* fix: docs navigation

* chore: recompile CSS

* chore: update Tailwind CSS and PostCSS dependencies to version 4.0.17, recompile CSS, and add safelist

* fix: typo in class name and add back decoration-from-font for typography a tags

* fix: update class syntax for Tailwind CSS compatibility in mermaid code block

Author: imfing

Diff for: assets/css/compiled/main.css

@@ -1,3 +1,3 @@
 .hextra-badge {
-  @apply hx-inline-flex hx-items-center;
+  @apply hx:inline-flex hx:items-center;
 }

Diff for: assets/css/components/badge.css

@@ -2,6 +2,6 @@
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .hextra-code-copy-btn {
-    @apply hx-backdrop-blur-md hx-bg-opacity-[.85] dark:hx-bg-opacity-80;
+    @apply hx:backdrop-blur-md hx:opacity-85 hx:dark:opacity-80;
   }
 }

Diff for: assets/css/components/code-copy.css

@@ -1,16 +1,16 @@
 .hextra-jupyter-code-cell {
   scrollbar-gutter: auto;
 
-  @apply hx-mt-6;
+  @apply hx:mt-6;
 
   .hextra-jupyter-code-cell-outputs-container {
-    @apply hx-text-xs hx-overflow-hidden;
+    @apply hx:text-xs hx:overflow-hidden;
 
     .hextra-jupyter-code-cell-outputs {
-      @apply hx-overflow-auto hx-max-h-[50vh];
+      @apply hx:overflow-auto hx:max-h-[50vh];
 
       pre {
-        @apply hx-text-xs hx-overflow-auto hx-max-w-full;
+        @apply hx:text-xs hx:overflow-auto hx:max-w-full;
       }
     }
   }

Diff for: assets/css/components/jupyter.css

@@ -1,55 +1,50 @@
 nav {
   .search-wrapper {
-    @apply hx-hidden md:hx-inline-block;
+    @apply hx:hidden hx:md:inline-block;
   }
 }
 
 @supports (
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .nav-container-blur {
-    @apply hx-backdrop-blur-md hx-bg-white/[.85] dark:!hx-bg-dark/80;
+    @apply hx:backdrop-blur-md hx:bg-white/[.85] hx:dark:bg-dark/80!;
   }
 }
 
-.hamburger-menu svg {
-  g {
-    @apply hx-origin-center;
-    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
-  }
-  path {
-    opacity: 1;
-    transition:
-      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
-      opacity 0.2s ease 0.2s;
-  }
+/* Hamburger Menu - Flattened Structure */
+.hamburger-menu svg g {
+  @apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
+}
 
-  &.open {
-    path {
-      transition:
-        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
-        opacity 0s ease 0.2s;
-    }
-    g {
-      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
-    }
-  }
+.hamburger-menu svg path {
+  @apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
+}
 
-  &.open > {
-    path {
-      @apply hx-opacity-0;
-    }
-    g:nth-of-type(1) {
-      @apply hx-rotate-45;
-      path {
-        transform: translate3d(0, 4px, 0);
-      }
-    }
-    g:nth-of-type(2) {
-      @apply -hx-rotate-45;
-      path {
-        transform: translate3d(0, -4px, 0);
-      }
-    }
-  }
+.hamburger-menu svg.open path {
+  @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-0;
+}
+
+.hamburger-menu svg.open g {
+  @apply hx:transition-transform hx:duration-100 hx:ease-out hx:delay-100;
+}
+
+.hamburger-menu svg.open > path {
+  @apply hx:opacity-0;
+}
+
+.hamburger-menu svg.open > g:nth-of-type(1) {
+  @apply hx:rotate-45;
+}
+
+.hamburger-menu svg.open > g:nth-of-type(1) path {
+  @apply hx:translate-y-1;
+}
+
+.hamburger-menu svg.open > g:nth-of-type(2) {
+  @apply hx:-rotate-45;
+}
+
+.hamburger-menu svg.open > g:nth-of-type(2) path {
+  @apply hx:-translate-y-1;
 }

Diff for: assets/css/components/navbar.css

@@ -4,18 +4,18 @@
 
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply hx-w-3 hx-h-3;
+    @apply hx:w-3 hx:h-3;
   }
   &::-webkit-scrollbar-track {
-    @apply hx-bg-transparent;
+    @apply hx:bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    @apply hx-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 hx-shadow-neutral-500/20 hover:hx-shadow-neutral-500/40;
+    @apply hx:shadow-neutral-500/20 hx:hover:shadow-neutral-500/40;
   }
 }

Diff for: assets/css/components/scrollbar.css

@@ -1,38 +1,38 @@
 .search-wrapper {
   li {
-    @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;
+    @apply hx:mx-2.5 hx:break-words hx:rounded-md hx:contrast-more:border hx:text-gray-800 hx:contrast-more:border-transparent hx:dark:text-gray-300;
     a {
-      @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
+      @apply hx:block hx:scroll-m-12 hx:px-2.5 hx:py-2;
     }
 
     .title {
-      @apply hx-text-base hx-font-semibold hx-leading-5;
+      @apply hx:text-base hx:font-semibold hx:leading-5;
     }
 
     .active {
-      @apply hx-rounded-md hx-bg-primary-500/10 contrast-more:hx-border-primary-500;
+      @apply hx:rounded-md hx:bg-primary-500/10 hx:contrast-more:border-primary-500;
     }
   }
 
   .no-result {
-    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
+    @apply hx:block hx:select-none hx:p-8 hx:text-center hx:text-sm hx:text-gray-400;
   }
 
   .prefix {
-    @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;
+    @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 hx:first:mt-0 hx:dark:border-white/20 hx:dark:text-gray-300 hx:contrast-more:border-gray-600
+    hx:contrast-more:text-gray-900 hx:contrast-more:dark:border-gray-50 hx:contrast-more:dark:text-gray-50;
   }
 
   .excerpt {
-    @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;
+    @apply hx:overflow-hidden hx:text-ellipsis hx:mt-1 hx:text-sm hx:leading-[1.35rem] hx:text-gray-600 hx:dark:text-gray-400 hx:contrast-more:dark:text-gray-50;
     display: -webkit-box;
     line-clamp: 1;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
 
   .match {
-    @apply hx-text-primary-600;
+    @apply hx:text-primary-600;
   }
 }

Diff for: assets/css/components/search.css

@@ -1,7 +1,7 @@
-@media (max-width: 767px) {
+@media (max-width: 48rem) {
   .sidebar-container {
-    @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);
+    @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 hx:dark:bg-dark;
+    transition: transform 0.4s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
     backface-visibility: hidden;
@@ -10,12 +10,12 @@
 
 .sidebar-container {
   li > div {
-    @apply hx-h-0;
+    @apply hx:h-0;
   }
   li.open > div {
-    @apply hx-h-auto hx-pt-1;
+    @apply hx:h-auto hx:pt-1;
   }
   li.open > a > span > svg > path {
-    @apply hx-rotate-90;
+    @apply hx:rotate-90;
   }
 }

Diff for: assets/css/components/sidebar.css

@@ -1,17 +1,22 @@
-.steps h3 {
-  counter-increment: step;
-
-  &:before {
-    @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] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px];
-    content: counter(step);
+.steps {
+  :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
+    counter-increment: step;
+    @apply hx:ltr:before:ml-[-41px] hx:rtl:before:mr-[-44px];
+    /* https://github.com/tailwindlabs/tailwindcss/issues/15597#issuecomment-2582673546 */
+    @apply hx:before:bg-gray-100 hx:dark:before:bg-neutral-800;
+    @apply hx:before:border-4 hx:before:border-white hx:dark:before:border-dark;
+    &:before {
+      content: counter(step);
+      @apply hx:absolute hx:size-[33px];
+      @apply hx:rounded-full hx:text-neutral-400 hx:text-base hx:font-normal hx:text-center hx:-indent-px;
+    }
   }
 }
 
-:lang(fa) .steps h3 {
-  &:before {
-    content: counter(step, persian);
+:lang(fa) .steps {
+  :where(h2, h3, h4, h5, h6):not(.no-step-marker) {
+    &:before {
+      content: counter(step, persian);
+    }
   }
 }

Diff for: assets/css/components/steps.css

@@ -1,53 +1,53 @@
 /* Code syntax highlight */
-@import "chroma/light.css";
-@import "chroma/dark.css";
+@import "./chroma/light.css";
+@import "./chroma/dark.css";
 
 .hextra-code-block {
-  @apply hx-text-[.9em] hx-leading-5;
+  @apply hx:text-[.9em] hx:leading-5;
 
   pre {
-    @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;
+    @apply hx:text-[.9em] hx:bg-primary-700/5 hx:overflow-x-auto hx:font-medium hx:subpixel-antialiased hx:dark:bg-primary-300/10 hx:contrast-more:border hx:contrast-more:border-primary-900/20 hx:contrast-more:contrast-150 hx:contrast-more:dark:border-primary-100/40;
   }
 
   .filename {
-    @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;
+    @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 hx:dark:bg-primary-300/10 hx:dark:text-gray-200;
   }
 
   .filename + pre:not(.lntable pre) {
     /* Override padding for code blocks with filename but no highlight */
-    @apply hx-pt-12;
+    @apply hx:pt-12;
   }
 }
 
 .hextra-code-block pre:not(.lntable pre) {
-  @apply hx-px-4 hx-mb-4 hx-py-4 hx-rounded-xl;
+  @apply hx:px-4 hx:mb-4 hx:py-4 hx:rounded-xl;
 }
 
 .hextra-code-block div:nth-of-type(2) pre {
-  @apply hx-pt-12 hx-pb-4;
+  @apply hx:pt-12 hx:pb-4;
 }
 
 .chroma {
   .lntable {
-    @apply hx-m-0 hx-block hx-w-auto hx-overflow-auto hx-rounded-xl;
+    @apply hx:m-0 hx:block hx:w-auto hx:overflow-auto hx:rounded-xl;
 
     pre {
-      @apply hx-pt-4 hx-pb-4;
+      @apply hx:pt-4 hx:pb-4;
     }
   }
   .ln,
   .lnt:not(.hl > .lnt),
   .hl:not(.line) {
-    @apply hx-pl-4 hx-pr-4 hx-min-w-[2.6rem] hx-text-neutral-600 dark:hx-text-neutral-300;
+    @apply hx:pl-4 hx:pr-4 hx:min-w-[2.6rem] hx:text-neutral-600 hx:dark:text-neutral-300;
   }
   .lntd {
-    @apply hx-p-0 hx-align-top;
+    @apply hx:p-0 hx:align-top;
   }
   .lntd:last-of-type {
-    @apply hx-w-full;
+    @apply hx:w-full;
   }
   /* LineHighlight */
   .hl {
-    @apply hx-block hx-w-full hx-bg-primary-800/10;
+    @apply hx:block hx:w-full hx:bg-primary-800/10;
   }
 }

Diff for: assets/css/highlight.css

@@ -0,0 +1 @@
+hx:max-w-full

Diff for: assets/css/safelist.txt

@@ -1,26 +1,27 @@
-@import "tailwind.css";
+@import "tailwindcss" prefix(hx);
 
-@import "typography.css";
-@import "highlight.css";
-@import "components/cards.css";
-@import "components/steps.css";
-@import "components/search.css";
-@import "components/sidebar.css";
-@import "components/navbar.css";
-@import "components/scrollbar.css";
-@import "components/code-copy.css";
-@import "components/hextra/feature-grid.css";
-@import "components/jupyter.css";
-@import "components/badge.css";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47));
+  --color-primary-100: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44));
+  --color-primary-200: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 36));
+  --color-primary-300: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27));
+  --color-primary-400: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16));
+  --color-primary-500: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
+  --color-primary-600: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45));
+  --color-primary-700: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39));
+  --color-primary-800: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32));
+  --color-primary-900: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24));
+  --color-dark: #111;
+}
 
 html {
-  @apply hx-text-base hx-antialiased;
-  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
-  -webkit-tap-highlight-color: transparent;
+  @apply hx:text-base hx:antialiased;
 }
 
 body {
-  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
+  @apply hx:w-full hx:bg-white hx:dark:bg-dark hx:dark:text-gray-100;
 }
 
 :root {
@@ -36,3 +37,16 @@ body {
   --primary-saturation: 100%;
   --primary-lightness: 50%;
 }
+
+@import "./typography.css";
+@import "./highlight.css";
+@import "./components/cards.css";
+@import "./components/steps.css";
+@import "./components/search.css";
+@import "./components/sidebar.css";
+@import "./components/navbar.css";
+@import "./components/scrollbar.css";
+@import "./components/code-copy.css";
+@import "./components/hextra/feature-grid.css";
+@import "./components/jupyter.css";
+@import "./components/badge.css";