From 0fd05af65917ed9d29b2b9dc6f4832bc8dc05c9f Mon Sep 17 00:00:00 2001
From: Dylan Tientcheu <dylantientcheu@gmail.com>
Date: Thu, 24 Jul 2025 17:59:42 +0200
Subject: [PATCH] fix: tailwind styles

---
 packages/website/components.json              |   2 +-
 packages/website/docusaurus.config.mjs        |   4 +-
 packages/website/src/components/Home.js       |   6 +-
 .../website/src/components/ui/flip-words.jsx  |   2 +-
 packages/website/src/css/custom.css           | 258 +++++++++++++++---
 packages/website/tailwind.config.mjs          |  15 -
 6 files changed, 234 insertions(+), 53 deletions(-)
 delete mode 100644 packages/website/tailwind.config.mjs

diff --git a/packages/website/components.json b/packages/website/components.json
index 285033d3..2688c6a1 100644
--- a/packages/website/components.json
+++ b/packages/website/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/styles/globals.css",
+    "css": "src/css/custom.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
diff --git a/packages/website/docusaurus.config.mjs b/packages/website/docusaurus.config.mjs
index 07858bd9..d7d119e0 100644
--- a/packages/website/docusaurus.config.mjs
+++ b/packages/website/docusaurus.config.mjs
@@ -52,7 +52,7 @@ export default {
           showLastUpdateTime: true,
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: './src/css/custom.css',
         },
       }),
     ],
@@ -208,7 +208,7 @@ export default {
           srcDark: 'img/docsearch-x-algolia-logo-dark-mode.png',
           width: 200,
         },
-        copyright: `DocSearch 2015-${currentYear} – Built with 💙 by Algolia`,
+        copyright: `2015-${currentYear} – Built with 💙 by Algolia`,
       },
       image: 'img/og_image.png',
       prism: {
diff --git a/packages/website/src/components/Home.js b/packages/website/src/components/Home.js
index 6d879962..fbda0694 100644
--- a/packages/website/src/components/Home.js
+++ b/packages/website/src/components/Home.js
@@ -22,14 +22,14 @@ function VideoPlayer({ chapters }) {
   const [duration, setDuration] = useState(1);
 
   return (
-    <div className="w-full">
+    <div>
       <video
         loop={true}
         muted={true}
         playsInline={true}
         autoPlay={true}
         ref={videoRef}
-        className="bg-blue-100 w-4xl mx-auto h-auto rounded-md"
+        className="bg-blue-100 w-full md:w-4xl mx-auto h-auto rounded-md"
         preload="auto"
         poster="/img/resources/hero-video-poster.png"
         onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}
@@ -257,7 +257,7 @@ function Home() {
 
   return (
     <>
-      <div id="tailwind" className="container snap-y z-[10] snap-proximity">
+      <div className="container snap-y z-[10] snap-proximity">
         <Header />
         <Description />
       </div>
diff --git a/packages/website/src/components/ui/flip-words.jsx b/packages/website/src/components/ui/flip-words.jsx
index d906b3cd..742e041d 100644
--- a/packages/website/src/components/ui/flip-words.jsx
+++ b/packages/website/src/components/ui/flip-words.jsx
@@ -48,7 +48,7 @@ export const FlipWords = ({ words, duration = 3000, className }) => {
           scale: 2,
           position: 'absolute',
         }}
-        className={cn('z-10 inline-block relative text-left dark:text-blue-500 px-1', className)}
+        className={cn('z-10 inline-block text-left dark:text-blue-500 px-1', className)}
         key={currentWord}
       >
         {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
index 9cd24373..3442b5e1 100644
--- a/packages/website/src/css/custom.css
+++ b/packages/website/src/css/custom.css
@@ -1,8 +1,97 @@
-/* fonts */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme) important;
+@import 'tailwindcss/utilities.css' layer(utilities) important;
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');
 
 @custom-variant dark (&:is([data-theme="dark"] *));
 
+@layer base {
+  /*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+    border-color: hsl(var(--border));
+  }
+
+  :root {
+    /* Shadcn Style new-york - slate */
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  html[data-theme='dark'] {
+    /* Shadcn Style new-york - slate */
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  html {
+    font: var(--ifm-font-size-base) / var(--ifm-line-height-base)
+      var(--ifm-font-family-base);
+  }
+}
+
 :root {
   --ifm-font-size-base: 16px;
   --ifm-code-font-size: 90%;
@@ -11,6 +100,7 @@
   --ifm-footer-background-color: var(--grey-100);
   --ifm-menu-color-background-active: var(--ifm-color-emphasis-200);
   --ifm-announcement-bar-background-color: #21243d;
+  --ifm-font-family-base: 'Inter', 'sans-serif';
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -211,15 +301,6 @@ html[data-theme='dark'] {
   }
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
 html {
   font-family: 'Inter', sans-serif;
 }
@@ -462,24 +543,6 @@ html[data-theme='dark'] .header-github-link::before {
 
 /* Tailwindcss */
 
-#tailwind dd,
-#tailwind dt {
-  margin: 0;
-}
-
-#tailwind *,
-#tailwind ::before,
-#tailwind ::after {
-  border-width: 0;
-  border-style: solid;
-}
-
-#tailwind ol,
-#tailwind ul {
-  margin: 0;
-  padding: 0;
-}
-
 .grain-gradient-bg {
   position: relative;
   overflow: hidden;
@@ -675,9 +738,6 @@ html[data-theme='dark'] .header-github-link::before {
   translate: 0 calc(var(--travel) * 1%);
 }
 
-/* fragments */
-@import 'tailwindcss';
-
 html[data-theme='light'] .shimmer-effect {
   background: linear-gradient(90deg, #3c4fe0 25%, #60a5fa 50%, #3c4fe0 75%);
   background-size: 200% 100%;
@@ -734,3 +794,139 @@ html[data-theme='dark'] .shimmer-effect {
     box-shadow: 0 2px 16px #60a5fa88;
   }
 }
+
+.navbar__item svg,
+.menu__link svg,
+.footer__link-item svg {
+  display: none;
+}
+
+.header-github-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-github-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+/*  Keyboard search keys */
+kbd {
+  &[class^='searchHint_'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--docsearch-key-gradient);
+    border: 0;
+    border-radius: 3px;
+    box-shadow: var(--docsearch-key-shadow);
+    color: var(--docsearch-muted-color);
+    height: 20px;
+    margin-right: 0.4em;
+    padding: 0 7px 2px;
+  }
+
+  &.searchHint_btn {
+    display: inline-block;
+    align-items: unset;
+    justify-content: unset;
+    height: unset;
+    margin-left: 0.4rem;
+    padding: 4px 10px;
+  }
+}
+
+/* Search navbar (local search) */
+.navbar__search-input {
+  padding: 0 2rem 0 2.25rem;
+  width: 13.5rem;
+}
+
+code[class^='codeBlockLines_'] {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+div[class^='docItemContainer_'] article img {
+  display: block;
+  margin: auto;
+  border-radius: 7px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  -ms-border-radius: 7px;
+  -o-border-radius: 7px;
+}
+
+[class^='title_'] {
+  font-size: 2.3rem !important;
+}
+
+#__blog-post-container img[class^='img_'] {
+  border-radius: 7px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  -ms-border-radius: 7px;
+  -o-border-radius: 7px;
+}
+
+/* Sidebar Method labels */
+.api-method > .menu__link {
+  align-items: center;
+  justify-content: start;
+}
+
+.api-method > .menu__link::before {
+  width: 50px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 20px;
+  text-transform: uppercase;
+  font-weight: 600;
+  border-radius: 0.25rem;
+  border: 1px solid;
+  margin-right: var(--ifm-spacing-horizontal);
+  text-align: center;
+  flex-shrink: 0;
+  border-color: transparent;
+  color: white;
+}
+
+.get > .menu__link::before {
+  content: 'get';
+  background-color: var(--ifm-color-primary);
+}
+
+.put > .menu__link::before {
+  content: 'put';
+  background-color: var(--openapi-code-blue);
+}
+
+.post > .menu__link::before {
+  content: 'post';
+  background-color: var(--openapi-code-green);
+}
+
+.delete > .menu__link::before {
+  content: 'del';
+  background-color: var(--openapi-code-red);
+}
+
+.patch > .menu__link::before {
+  content: 'patch';
+  background-color: var(--openapi-code-orange);
+}
+
+/* Tablet */
+@media screen and (max-width: 991px) {
+  /* Search navbar local */
+  .navbar__search-input {
+    width: 14rem;
+    padding: 0 0.5rem 0 2.25rem;
+  }
+}
diff --git a/packages/website/tailwind.config.mjs b/packages/website/tailwind.config.mjs
deleted file mode 100644
index 910f585e..00000000
--- a/packages/website/tailwind.config.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  content: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
-  corePlugins: { preflight: false, container: false },
-  important: '#tailwind',
-  theme: {
-    extend: {
-      colors: {
-        algolia: '#1C52FF',
-      },
-      maxWidth: {
-        xxs: '18rem',
-      },
-    },
-  },
-};