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

assets/css/components/badge.css

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

assets/css/components/code-copy.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;
   }
 }

assets/css/components/jupyter.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;
       }
     }
   }

assets/css/components/navbar.css

@@ -1,6 +1,6 @@
 nav {
   .search-wrapper {
-    @apply hx-hidden md:hx-inline-block;
+    @apply hx:hidden hx:md:inline-block;
   }
 }
 
@@ -8,48 +8,43 @@ nav {
   (-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;
-  }
-
-  &.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;
-    }
-  }
-
-  &.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 - Flattened Structure */
+.hamburger-menu svg g {
+  @apply hx:origin-center hx:transition-all hx:duration-100 hx:ease-out;
+}
+
+.hamburger-menu svg path {
+  @apply hx:opacity-100 hx:transition-all hx:duration-100 hx:ease-out hx:delay-100;
+}
+
+.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;
 }

assets/css/components/scrollbar.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;
   }
 }

assets/css/components/search.css

@@ -1,31 +1,31 @@
 .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;
@@ -33,6 +33,6 @@
   }
 
   .match {
-    @apply hx-text-primary-600;
+    @apply hx:text-primary-600;
   }
 }

assets/css/components/sidebar.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;
   }
 }

assets/css/components/steps.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);
+    }
   }
 }