From bd266e440037d197b8006e7b6d4a1785e8873984 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 11:28:09 -0300
Subject: [PATCH 1/7] add tailwind directives parsing to biome

---
 biome.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/biome.json b/biome.json
index 475d432414..63d6dc1725 100644
--- a/biome.json
+++ b/biome.json
@@ -7,6 +7,11 @@
       }
     }
   },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "vcs": {
     "enabled": true,
     "clientKind": "git",

From d29cee47bbb3bb254bb00b195e19014c86589a0b Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 11:29:03 -0300
Subject: [PATCH 2/7] migrate to tailwindcss v4 in the preview server

---
 packages/preview-server/package.json          |   2 +-
 packages/preview-server/src/app/globals.css   | 122 +++++++++++++-
 packages/preview-server/src/app/layout.tsx    |   2 +-
 .../app/preview/[...slug]/error-overlay.tsx   |  10 +-
 .../preview-server/src/components/button.tsx  |   6 +-
 .../preview-server/src/components/code.tsx    |   4 +-
 .../src/components/icons/icon-button.tsx      |   2 +-
 .../preview-server/src/components/send.tsx    |   6 +-
 .../preview-server/src/components/shell.tsx   |  12 +-
 .../sidebar/file-tree-directory-children.tsx  |   2 +-
 .../src/components/sidebar/file-tree.tsx      |   4 +-
 .../src/components/sidebar/sidebar.tsx        |   2 +-
 .../preview-server/src/components/toolbar.tsx |  16 +-
 .../components/toolbar/checking-results.tsx   |   4 +-
 .../src/components/toolbar/toolbar-button.tsx |   2 +-
 .../components/topbar/view-size-controls.tsx  |   8 +-
 packages/preview-server/tailwind.config.ts    |  99 ------------
 pnpm-lock.yaml                                | 149 +++++++++++++++---
 18 files changed, 290 insertions(+), 162 deletions(-)
 delete mode 100644 packages/preview-server/tailwind.config.ts

diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index e708d52b46..f533ee0d91 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -63,7 +63,7 @@
     "source-map-js": "1.2.1",
     "stacktrace-parser": "0.1.11",
     "tailwind-merge": "3.2.0",
-    "tailwindcss": "3.4.0",
+    "tailwindcss": "4.1.17",
     "typescript": "5.8.3",
     "use-debounce": "10.0.4",
     "zod": "4.1.12"
diff --git a/packages/preview-server/src/app/globals.css b/packages/preview-server/src/app/globals.css
index 10304ba466..43ddd5b488 100644
--- a/packages/preview-server/src/app/globals.css
+++ b/packages/preview-server/src/app/globals.css
@@ -1,6 +1,122 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --background-image-gradient: linear-gradient(
+    145.37deg,
+    rgba(255, 255, 255, 0.09) -8.75%,
+    rgba(255, 255, 255, 0.027) 83.95%
+  );
+  --background-image-gradient-hover: linear-gradient(
+    145.37deg,
+    rgba(255, 255, 255, 0.1) -8.75%,
+    rgba(255, 255, 255, 0.057) 83.95%
+  );
+  --background-image-shine: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0) 45%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 55%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  --color-cyan-1: #0091f70a;
+  --color-cyan-2: #02a7f211;
+  --color-cyan-3: #00befd28;
+  --color-cyan-4: #00baff3b;
+  --color-cyan-5: #00befd4d;
+  --color-cyan-6: #00c7fd5e;
+  --color-cyan-7: #14cdff75;
+  --color-cyan-8: #11cfff95;
+  --color-cyan-9: #00cfffc3;
+  --color-cyan-10: #28d6ffcd;
+  --color-cyan-11: #52e1fee5;
+  --color-cyan-12: #bbf3fef7;
+
+  --color-slate-1: #00000000;
+  --color-slate-2: #d8f4f609;
+  --color-slate-3: #ddeaf814;
+  --color-slate-4: #d3edf81d;
+  --color-slate-5: #d9edfe25;
+  --color-slate-6: #d6ebfd30;
+  --color-slate-7: #d9edff40;
+  --color-slate-8: #d9edff5d;
+  --color-slate-9: #dfebfd6d;
+  --color-slate-10: #e5edfd7b;
+  --color-slate-11: #f1f7feb5;
+  --color-slate-12: #fcfdffef;
+
+  --font-sans:
+    var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono:
+    var(--font-sf-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  --animate-spin-slow: spin 3s linear infinite;
+  --animate-spin-fast: spin 1.5s linear infinite;
+
+  @keyframes shine {
+    0% {
+      background-position: -100%;
+    }
+
+    100% {
+      background-position: 100%;
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dashoffset: 1000;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+@utility arrow-hide {
+  appearance: textfield;
+
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0px;
+  }
+
+  &::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0px;
+  }
+}
+
+/*
+  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.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 html {
   color-scheme: dark;
diff --git a/packages/preview-server/src/app/layout.tsx b/packages/preview-server/src/app/layout.tsx
index 0f4ea0dcc4..4a99619456 100644
--- a/packages/preview-server/src/app/layout.tsx
+++ b/packages/preview-server/src/app/layout.tsx
@@ -33,7 +33,7 @@ export default async function RootLayout({
       lang="en"
     >
       <body className="relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
-        <div className="bg-gradient-to-t from-slate-3 flex flex-col">
+        <div className="bg-linear-to-t from-slate-3 flex flex-col">
           <EmailsProvider
             initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
           >
diff --git a/packages/preview-server/src/app/preview/[...slug]/error-overlay.tsx b/packages/preview-server/src/app/preview/[...slug]/error-overlay.tsx
index a7dd003cc3..e2304c2723 100644
--- a/packages/preview-server/src/app/preview/[...slug]/error-overlay.tsx
+++ b/packages/preview-server/src/app/preview/[...slug]/error-overlay.tsx
@@ -36,17 +36,17 @@ export const ErrorOverlay = ({ error }: ErrorOverlayProps) => {
         min-h-[50vh] w-full max-w-lg sm:rounded-lg md:max-w-[568px] lg:max-w-[920px]
         absolute left-[50%] top-[50%] z-50  translate-x-[-50%] translate-y-[-50%] 
         rounded-t-sm overflow-hidden bg-white text-black shadow-lg duration-200
-        flex flex-col selection:!text-black
+        flex flex-col selection:text-black!
       "
       >
         <div className="bg-red-500 h-3" />
-        <div className="flex flex-grow p-6 min-w-0 max-w-full flex-col space-y-1.5">
-          <div className="flex-shrink pb-2 text-xl tracking-tight">
+        <div className="flex grow p-6 min-w-0 max-w-full flex-col space-y-1.5">
+          <div className="shrink pb-2 text-xl tracking-tight">
             <b>{error.name}</b>: <Message>{error.message}</Message>
           </div>
           {error.stack ? (
-            <div className="flex-grow scroll-px-4 overflow-x-auto rounded-lg bg-black p-2 text-gray-100">
-              <pre className="w-full min-w-0 font-mono leading-6 selection:!text-cyan-12 text-xs">
+            <div className="grow scroll-px-4 overflow-x-auto rounded-lg bg-black p-2 text-gray-100">
+              <pre className="w-full min-w-0 font-mono leading-6 selection:text-cyan-12! text-xs">
                 {error.stack}
               </pre>
             </div>
diff --git a/packages/preview-server/src/components/button.tsx b/packages/preview-server/src/components/button.tsx
index 84c7453035..91c7545ee7 100644
--- a/packages/preview-server/src/components/button.tsx
+++ b/packages/preview-server/src/components/button.tsx
@@ -70,14 +70,14 @@ const getAppearance = (appearance: Appearance | undefined) => {
       return [
         'border-white bg-white text-black transition-colors duration-200 ease-in-out',
         'hover:bg-white/90',
-        'focus:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white/20',
+        'focus:bg-white/90 focus:outline-hidden focus:ring-2 focus:ring-white/20',
         'mt-2 mb-2 aria-disabled:border-transparent aria-disabled:bg-slate-11',
       ];
     case 'gradient':
       return [
         'bg-gradient border-[#34343A] backdrop-blur-[1.25rem]',
-        'hover:bg-gradientHover',
-        'focus:bg-gradientHover focus:outline-none focus:ring-2 focus:ring-white/20',
+        'hover:bg-gradient-hover',
+        'focus:bg-gradient-hover focus:outline-hidden focus:ring-2 focus:ring-white/20',
       ];
     default:
       unreachable(appearance);
diff --git a/packages/preview-server/src/components/code.tsx b/packages/preview-server/src/components/code.tsx
index 7f311e22ee..d512a1571e 100644
--- a/packages/preview-server/src/components/code.tsx
+++ b/packages/preview-server/src/components/code.tsx
@@ -129,8 +129,8 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                       scroll={false}
                       aria-selected={isHighlighted}
                       className={cn(
-                        'text-[#49494f] relative text-[13px] font-light font-[MonoLisa,_Menlo,_monospace] align-middle scroll-mt-[325px] select-none pr-3 cursor-pointer hover:text-slate-12 transition-colors',
-                        'aria-selected:text-cyan-11 aria-selected:hover:text-cyan-11 aria-selected:bg-cyan-5 [&+*]:aria-selected:bg-cyan-5',
+                        'text-[#49494f] relative text-[13px] font-light font-[MonoLisa,Menlo,monospace] align-middle scroll-mt-[325px] select-none pr-3 cursor-pointer hover:text-slate-12 transition-colors',
+                        'aria-selected:text-cyan-11 aria-selected:hover:text-cyan-11 aria-selected:bg-cyan-5 aria-selected:[&+*]:bg-cyan-5',
                         isHighlightStart && 'rounded-tl-sm',
                         isHighlightEnd && 'rounded-bl-sm',
                       )}
diff --git a/packages/preview-server/src/components/icons/icon-button.tsx b/packages/preview-server/src/components/icons/icon-button.tsx
index 52b7567b94..4ebe38f7a4 100644
--- a/packages/preview-server/src/components/icons/icon-button.tsx
+++ b/packages/preview-server/src/components/icons/icon-button.tsx
@@ -11,7 +11,7 @@ export const IconButton = React.forwardRef<
     type="button"
     {...props}
     className={cn(
-      'focus:ring-gray-8 rounded text-slate-11 transition duration-200 ease-in-out hover:text-slate-12 focus:text-slate-12 focus:outline-none focus:ring-2',
+      'focus:ring-gray-8 rounded-sm text-slate-11 transition duration-200 ease-in-out hover:text-slate-12 focus:text-slate-12 focus:outline-hidden focus:ring-2',
       className,
     )}
     ref={forwardedRef}
diff --git a/packages/preview-server/src/components/send.tsx b/packages/preview-server/src/components/send.tsx
index f4a642c03c..4dcfe98855 100644
--- a/packages/preview-server/src/components/send.tsx
+++ b/packages/preview-server/src/components/send.tsx
@@ -60,7 +60,7 @@ export const Send = ({ markup }: { markup: string }) => {
     >
       <Popover.Trigger asChild>
         <button
-          className="box-border flex h-5 w-20 items-center justify-center self-center rounded-lg border border-slate-6 bg-slate-2 px-4 py-4 text-center font-sans text-sm text-slate-11 outline-none transition duration-300 ease-in-out hover:border-slate-10 hover:text-slate-12"
+          className="box-border flex h-5 w-20 items-center justify-center self-center rounded-lg border border-slate-6 bg-slate-2 px-4 py-4 text-center font-sans text-sm text-slate-11 outline-hidden transition duration-300 ease-in-out hover:border-slate-10 hover:text-slate-12"
           type="submit"
         >
           Send
@@ -82,7 +82,7 @@ export const Send = ({ markup }: { markup: string }) => {
             </label>
             <input
               autoFocus
-              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-hidden transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               defaultValue={to}
               id={toId}
               onChange={(e) => {
@@ -99,7 +99,7 @@ export const Send = ({ markup }: { markup: string }) => {
               Subject
             </label>
             <input
-              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-hidden transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               defaultValue={subject}
               id={subjectId}
               onChange={(e) => {
diff --git a/packages/preview-server/src/components/shell.tsx b/packages/preview-server/src/components/shell.tsx
index c29a22f256..237b187bf9 100644
--- a/packages/preview-server/src/components/shell.tsx
+++ b/packages/preview-server/src/components/shell.tsx
@@ -31,14 +31,14 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
     >
       <div
         className={
-          'flex h-[4.375rem] items-center justify-between border-slate-6 border-b px-6 lg:hidden'
+          'flex h-17.5 items-center justify-between border-slate-6 border-b px-6 lg:hidden'
         }
       >
-        <div className="flex h-[4.375rem] items-center">
+        <div className="flex h-17.5 items-center">
           <Logo />
         </div>
         <button
-          className="flex h-6 w-6 items-center justify-center rounded text-white"
+          className="flex h-6 w-6 items-center justify-center rounded-sm text-white"
           onClick={() => {
             setSidebarToggled((v) => !v);
           }}
@@ -62,11 +62,11 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
           </svg>
         </button>
       </div>
-      <div className="w-[100dvw] flex h-[calc(100dvh-4.375rem)] lg:h-[100dvh]">
+      <div className="w-dvw flex h-[calc(100dvh-4.375rem)] lg:h-dvh">
         <React.Suspense>
           <Sidebar
             className={cn(
-              'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
+              'fixed top-17.5 left-0 z-9999 h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
               'lg:static lg:inline-block lg:z-auto lg:max-h-full lg:w-[16rem]',
               {
                 '-translate-x-full lg:translate-x-0': sidebarToggled,
@@ -80,7 +80,7 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
           className={cn(
             'inline-block relative overflow-hidden will-change-[width]',
             'w-full h-full',
-            '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
+            '[transition:width_0.2s_ease-in-out,transform_0.2s_ease-in-out]',
             {
               'lg:w-[calc(100%-16rem)]': sidebarToggled,
               'opacity-0 lg:opacity-100': !sidebarToggled,
diff --git a/packages/preview-server/src/components/sidebar/file-tree-directory-children.tsx b/packages/preview-server/src/components/sidebar/file-tree-directory-children.tsx
index 399f237611..2a42b58cf1 100644
--- a/packages/preview-server/src/components/sidebar/file-tree-directory-children.tsx
+++ b/packages/preview-server/src/components/sidebar/file-tree-directory-children.tsx
@@ -108,7 +108,7 @@ export const FileTreeDirectoryChildren = (props: {
                             >
                               {props.isRoot ? null : (
                                 <motion.div
-                                  className="absolute top-1 left-[0.4rem] inset-0 h-6 w-px rounded-sm bg-cyan-11"
+                                  className="absolute top-1 left-[0.4rem] inset-0 h-6 w-px rounded-xs bg-cyan-11"
                                   layoutId="active-file"
                                   transition={{
                                     type: 'spring',
diff --git a/packages/preview-server/src/components/sidebar/file-tree.tsx b/packages/preview-server/src/components/sidebar/file-tree.tsx
index b54273686d..080849ca56 100644
--- a/packages/preview-server/src/components/sidebar/file-tree.tsx
+++ b/packages/preview-server/src/components/sidebar/file-tree.tsx
@@ -13,8 +13,8 @@ export const FileTree = ({
   emailsDirectoryMetadata,
 }: FileTreeProps) => {
   return (
-    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-[14.5rem]">
-      <nav className="flex flex-grow flex-col p-4 pr-0 pl-0">
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-58">
+      <nav className="flex grow flex-col p-4 pr-0 pl-0">
         <Collapsible.Root open>
           <React.Suspense>
             <FileTreeDirectoryChildren
diff --git a/packages/preview-server/src/components/sidebar/sidebar.tsx b/packages/preview-server/src/components/sidebar/sidebar.tsx
index e338038b46..46a2589671 100644
--- a/packages/preview-server/src/components/sidebar/sidebar.tsx
+++ b/packages/preview-server/src/components/sidebar/sidebar.tsx
@@ -24,7 +24,7 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
       <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
         <div
           className={clsx(
-            'hidden min-h-14 flex-shrink items-center py-2 px-3 lg:flex border-b border-slate-4',
+            'hidden min-h-14 shrink items-center py-2 px-3 lg:flex border-b border-slate-4',
           )}
         >
           <h2>
diff --git a/packages/preview-server/src/components/toolbar.tsx b/packages/preview-server/src/components/toolbar.tsx
index 3500b2c331..e843a6f925 100644
--- a/packages/preview-server/src/components/toolbar.tsx
+++ b/packages/preview-server/src/components/toolbar.tsx
@@ -139,7 +139,7 @@ const ToolbarInner = ({
       className={cn(
         'absolute bottom-0 left-0 right-0',
         'border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',
-        'data-[toggled=false]:translate-y-[10.625rem]',
+        'data-[toggled=false]:translate-y-42.5',
       )}
     >
       <Tabs.Root
@@ -150,7 +150,7 @@ const ToolbarInner = ({
         asChild
       >
         <div className="flex flex-col h-full">
-          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full flex-shrink-0">
+          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full shrink-0">
             <LayoutGroup id={`toolbar-${id}`}>
               <Tabs.Trigger asChild value="linter">
                 <ToolbarButton active={activeTab === 'linter'}>
@@ -234,7 +234,7 @@ const ToolbarInner = ({
             </div>
           </Tabs.List>
 
-          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto pr-3 pl-4 pt-3">
+          <div className="grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto pr-3 pl-4 pt-3">
             <Tabs.Content value="linter">
               {lintLoading ? (
                 <LoadingState message="Analyzing your code for linting issues..." />
@@ -310,7 +310,7 @@ const LoadingState = ({ message }: { message: string }) => {
   return (
     <div className="flex flex-col items-center justify-center pt-8">
       <div className="relative mb-8 flex items-center justify-center">
-        <div className="h-12 w-12 rounded-full bg-gradient-to-br from-cyan-400/80 to-cyan-600/80 opacity-10 blur-xl absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" />
+        <div className="h-12 w-12 rounded-full bg-linear-to-br from-cyan-400/80 to-cyan-600/80 opacity-10 blur-xl absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" />
         <div className="h-12 w-12 rounded-full border border-slate-4 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
         <div className="h-10 w-10 rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <div className="h-5 w-5 rounded-full border-2 border-white/50 border-t-transparent animate-spin-fast" />
@@ -335,10 +335,10 @@ const SuccessWrapper = ({ children }: { children: React.ReactNode }) => {
 const SuccessIcon = () => {
   return (
     <div className="relative mb-8 flex items-center justify-center">
-      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-green-300/20 opacity-80 to-emerald-500/30 blur-md absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
-      <div className="h-12 w-12 rounded-full bg-gradient-to-br from-green-400/80 opacity-10 to-emerald-600/80 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg" />
-      <div className="h-10 w-10 rounded-full bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]">
-        <IconCheck size={24} className="text-white drop-shadow-sm" />
+      <div className="h-16 w-16 rounded-full bg-linear-to-br from-green-300/20 opacity-80 to-emerald-500/30 blur-md absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      <div className="h-12 w-12 rounded-full bg-linear-to-br from-green-400/80 opacity-10 to-emerald-600/80 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg" />
+      <div className="h-10 w-10 rounded-full bg-linear-to-br from-green-400 to-emerald-600 flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]">
+        <IconCheck size={24} className="text-white drop-shadow-xs" />
       </div>
     </div>
   );
diff --git a/packages/preview-server/src/components/toolbar/checking-results.tsx b/packages/preview-server/src/components/toolbar/checking-results.tsx
index 5c50d36e1e..ed68d734a1 100644
--- a/packages/preview-server/src/components/toolbar/checking-results.tsx
+++ b/packages/preview-server/src/components/toolbar/checking-results.tsx
@@ -34,7 +34,7 @@ export const ResultList = ({
     <Collapsible.Root className="group" defaultOpen={defaultOpen && !disabled}>
       <Collapsible.Trigger
         className={cn(
-          'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+          'group flex w-full items-center gap-1 rounded-sm p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
           statusStyles[status],
           disabled && 'cursor-not-allowed opacity-70',
         )}
@@ -42,7 +42,7 @@ export const ResultList = ({
       >
         <span
           className={cn(
-            '-mt-[.125rem] transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+            '-mt-0.5 transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
             'rotate-0 group-data-[state=open]:rotate-90',
           )}
         >
diff --git a/packages/preview-server/src/components/toolbar/toolbar-button.tsx b/packages/preview-server/src/components/toolbar/toolbar-button.tsx
index 55cb0fbf49..f0733f2b03 100644
--- a/packages/preview-server/src/components/toolbar/toolbar-button.tsx
+++ b/packages/preview-server/src/components/toolbar/toolbar-button.tsx
@@ -34,7 +34,7 @@ export const ToolbarButton = ({
             {children}
             {active ? (
               <motion.span
-                className="-bottom-px absolute rounded-sm left-0 w-full bg-cyan-11 h-px"
+                className="-bottom-px absolute rounded-xs left-0 w-full bg-cyan-11 h-px"
                 layoutId="active-toolbar-button"
                 transition={{
                   type: 'spring',
diff --git a/packages/preview-server/src/components/topbar/view-size-controls.tsx b/packages/preview-server/src/components/topbar/view-size-controls.tsx
index f39cac5614..820b6d4f81 100644
--- a/packages/preview-server/src/components/topbar/view-size-controls.tsx
+++ b/packages/preview-server/src/components/topbar/view-size-controls.tsx
@@ -104,7 +104,7 @@ export const ViewSizeControls = ({
         <Popover.Trigger asChild>
           <button
             type="button"
-            className="relative flex items-center justify-center overflow-hidden w-9 text-slate-11 text-sm leading-none outline-none transition-colors ease-linear focus-within:text-slate-12 hover:text-slate-12 focus:text-slate-12"
+            className="relative flex items-center justify-center overflow-hidden w-9 text-slate-11 text-sm leading-none outline-hidden transition-colors ease-linear focus-within:text-slate-12 hover:text-slate-12 focus:text-slate-12"
           >
             <span className="sr-only">View presets</span>
             <IconArrowDown
@@ -120,7 +120,7 @@ export const ViewSizeControls = ({
         <Popover.Portal>
           <Popover.Content
             align="end"
-            className="flex min-w-[12rem] flex-col gap-2 rounded-md border border-slate-8 border-solid bg-black px-2 py-2 text-white"
+            className="flex min-w-48 flex-col gap-2 rounded-md border border-slate-8 border-solid bg-black px-2 py-2 text-white"
             sideOffset={5}
           >
             <div className="flex w-full items-center justify-between text-sm gap-2">
@@ -137,7 +137,7 @@ export const ViewSizeControls = ({
                     setViewWidth(value);
                   }
                 }}
-                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-hidden transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               />
             </div>
 
@@ -155,7 +155,7 @@ export const ViewSizeControls = ({
                     setViewHeight(value);
                   }
                 }}
-                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+                className="w-20 appearance-none rounded-lg border border-slate-6 bg-slate-5 px-1 py-1 text-sm text-slate-12 placeholder-slate-10 outline-hidden transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
               />
             </div>
           </Popover.Content>
diff --git a/packages/preview-server/tailwind.config.ts b/packages/preview-server/tailwind.config.ts
deleted file mode 100644
index f4355b3ee8..0000000000
--- a/packages/preview-server/tailwind.config.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as colors from '@radix-ui/colors';
-import type { Config } from 'tailwindcss';
-
-import { fontFamily } from 'tailwindcss/defaultTheme';
-import plugin from 'tailwindcss/plugin';
-
-const numberInputArrowHide = plugin(({ addUtilities }) => {
-  addUtilities({
-    '.arrow-hide': {
-      appearance: 'textfield',
-      '&::-webkit-inner-spin-button': {
-        appearance: 'none',
-        margin: '0px',
-      },
-      '&::-webkit-outer-spin-button': {
-        appearance: 'none',
-        margin: '0px',
-      },
-    },
-  });
-});
-
-const config: Config = {
-  content: {
-    // needs to be relative because tailwind will find the content
-    // by default based on the process's cwd
-    relative: true,
-    files: [
-      './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-      './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    ],
-  },
-  theme: {
-    extend: {
-      backgroundImage: {
-        gradient:
-          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
-        gradientHover:
-          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.1) -8.75%, rgba(255, 255, 255, 0.057) 83.95%)',
-        shine:
-          'linear-gradient(45deg, rgba(255,255,255,0) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%)',
-      },
-      colors: {
-        cyan: {
-          1: colors.cyanDarkA.cyanA1,
-          2: colors.cyanDarkA.cyanA2,
-          3: colors.cyanDarkA.cyanA3,
-          4: colors.cyanDarkA.cyanA4,
-          5: colors.cyanDarkA.cyanA5,
-          6: colors.cyanDarkA.cyanA6,
-          7: colors.cyanDarkA.cyanA7,
-          8: colors.cyanDarkA.cyanA8,
-          9: colors.cyanDarkA.cyanA9,
-          10: colors.cyanDarkA.cyanA10,
-          11: colors.cyanDarkA.cyanA11,
-          12: colors.cyanDarkA.cyanA12,
-        },
-        slate: {
-          1: colors.slateDarkA.slateA1,
-          2: colors.slateDarkA.slateA2,
-          3: colors.slateDarkA.slateA3,
-          4: colors.slateDarkA.slateA4,
-          5: colors.slateDarkA.slateA5,
-          6: colors.slateDarkA.slateA6,
-          7: colors.slateDarkA.slateA7,
-          8: colors.slateDarkA.slateA8,
-          9: colors.slateDarkA.slateA9,
-          10: colors.slateDarkA.slateA10,
-          11: colors.slateDarkA.slateA11,
-          12: colors.slateDarkA.slateA12,
-        },
-      },
-      fontFamily: {
-        sans: ['var(--font-inter)', ...fontFamily.sans],
-        mono: ['var(--font-sf-mono)', ...fontFamily.mono],
-      },
-      keyframes: {
-        shine: {
-          '0%': { backgroundPosition: '-100%' },
-          '100%': { backgroundPosition: '100%' },
-        },
-        dash: {
-          '0%': { strokeDashoffset: '1000' },
-          '100%': { strokeDashoffset: '0' },
-        },
-        spin: {
-          '0%': { transform: 'rotate(0deg)' },
-          '100%': { transform: 'rotate(360deg)' },
-        },
-      },
-      animation: {
-        'spin-slow': 'spin 3s linear infinite',
-        'spin-fast': 'spin 1.5s linear infinite',
-      },
-    },
-  },
-  plugins: [numberInputArrowHide],
-};
-export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f273bad196..01f27b0d86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,7 +89,7 @@ importers:
     dependencies:
       mintlify:
         specifier: 4.2.218
-        version: 4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
+        version: 4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
       zod:
         specifier: 3.24.3
         version: 3.24.3
@@ -784,8 +784,8 @@ importers:
         specifier: 3.2.0
         version: 3.2.0
       tailwindcss:
-        specifier: 3.4.0
-        version: 3.4.0
+        specifier: 4.1.17
+        version: 4.1.17
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -8524,6 +8524,9 @@ packages:
   tailwindcss@4.1.12:
     resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==}
 
+  tailwindcss@4.1.17:
+    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -10719,6 +10722,36 @@ snapshots:
       - acorn
       - supports-color
 
+  '@mdx-js/mdx@3.1.0(acorn@8.15.0)':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdx': 2.0.13
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.3
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.0(acorn@8.15.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
+      source-map: 0.7.4
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - acorn
+      - supports-color
+
   '@mdx-js/react@3.1.0(@types/react@19.2.6)(react@19.0.0)':
     dependencies:
       '@types/mdx': 2.0.13
@@ -10762,15 +10795,15 @@ snapshots:
 
   '@microsoft/tsdoc@0.15.1': {}
 
-  '@mintlify/cli@4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)':
+  '@mintlify/cli@4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)':
     dependencies:
       '@inquirer/prompts': 7.9.0(@types/node@22.14.1)
       '@mintlify/common': 1.0.619(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/link-rot': 3.0.762(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/link-rot': 3.0.762(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       '@mintlify/models': 0.0.243
-      '@mintlify/prebuild': 1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/previewing': 4.0.798(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
-      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/prebuild': 1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/previewing': 4.0.798(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
+      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       adm-zip: 0.5.16
       chalk: 5.2.0
       color: 4.2.3
@@ -10857,12 +10890,12 @@ snapshots:
       - ts-node
       - typescript
 
-  '@mintlify/link-rot@3.0.762(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)':
+  '@mintlify/link-rot@3.0.762(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)':
     dependencies:
       '@mintlify/common': 1.0.619(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/prebuild': 1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/previewing': 4.0.798(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
-      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/prebuild': 1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/previewing': 4.0.798(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
+      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       fs-extra: 11.1.0
       unist-util-visit: 4.1.2
     transitivePeerDependencies:
@@ -10908,6 +10941,33 @@ snapshots:
       - supports-color
       - typescript
 
+  '@mintlify/mdx@3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)':
+    dependencies:
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@shikijs/transformers': 3.15.0
+      '@shikijs/twoslash': 3.15.0(typescript@5.9.3)
+      arktype: 2.1.26
+      hast-util-to-string: 3.0.1
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm: 3.1.0
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-to-hast: 13.2.0
+      next-mdx-remote-client: 1.0.7(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      rehype-katex: 7.0.1
+      remark-gfm: 4.0.1
+      remark-math: 6.0.0
+      remark-smartypants: 3.0.2
+      shiki: 3.15.0
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - acorn
+      - supports-color
+      - typescript
+
   '@mintlify/models@0.0.243':
     dependencies:
       axios: 1.10.0
@@ -10924,12 +10984,12 @@ snapshots:
       leven: 4.0.0
       yaml: 2.6.1
 
-  '@mintlify/prebuild@1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)':
+  '@mintlify/prebuild@1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)':
     dependencies:
       '@mintlify/common': 1.0.619(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       '@mintlify/openapi-parser': 0.0.8
       '@mintlify/scraping': 4.0.479(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       chalk: 5.3.0
       favicons: 7.2.0
       fs-extra: 11.1.0
@@ -10955,11 +11015,11 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@mintlify/previewing@4.0.798(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)':
+  '@mintlify/previewing@4.0.798(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)':
     dependencies:
       '@mintlify/common': 1.0.619(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/prebuild': 1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
-      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/prebuild': 1.0.748(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/validation': 0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       better-opn: 3.0.2
       chalk: 5.2.0
       chokidar: 3.5.3
@@ -11048,6 +11108,29 @@ snapshots:
       - supports-color
       - typescript
 
+  '@mintlify/validation@0.1.529(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)':
+    dependencies:
+      '@mintlify/mdx': 3.0.4(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
+      '@mintlify/models': 0.0.243
+      arktype: 2.1.27
+      js-yaml: 4.1.0
+      lcm: 0.0.3
+      lodash: 4.17.21
+      object-hash: 3.0.0
+      openapi-types: 12.1.3
+      uuid: 11.1.0
+      zod: 3.21.4
+      zod-to-json-schema: 3.20.4(zod@3.21.4)
+    transitivePeerDependencies:
+      - '@radix-ui/react-popover'
+      - '@types/react'
+      - acorn
+      - debug
+      - react
+      - react-dom
+      - supports-color
+      - typescript
+
   '@monogrid/gainmap-js@3.1.0(three@0.170.0)':
     dependencies:
       promise-worker-transferable: 1.0.4
@@ -16398,9 +16481,9 @@ snapshots:
       minipass: 3.3.6
       yallist: 4.0.0
 
-  mintlify@4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3):
+  mintlify@4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3):
     dependencies:
-      '@mintlify/cli': 4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.11.2)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
+      '@mintlify/cli': 4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
     transitivePeerDependencies:
       - '@radix-ui/react-popover'
       - '@types/node'
@@ -16480,6 +16563,22 @@ snapshots:
       - acorn
       - supports-color
 
+  next-mdx-remote-client@1.0.7(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@mdx-js/mdx': 3.1.0(acorn@8.15.0)
+      '@mdx-js/react': 3.1.0(@types/react@19.2.6)(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      remark-mdx-remove-esm: 1.1.0
+      serialize-error: 12.0.0
+      vfile: 6.0.3
+      vfile-matter: 5.0.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - acorn
+      - supports-color
+
   next-safe-action@8.0.11(next@16.0.7(@babel/core@7.26.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       next: 16.0.7(@babel/core@7.26.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -17318,6 +17417,16 @@ snapshots:
     transitivePeerDependencies:
       - acorn
 
+  recma-jsx@1.0.0(acorn@8.15.0):
+    dependencies:
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - acorn
+
   recma-parse@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -18341,6 +18450,8 @@ snapshots:
 
   tailwindcss@4.1.12: {}
 
+  tailwindcss@4.1.17: {}
+
   tapable@2.2.1: {}
 
   tar-fs@3.0.8:

From f17a46d14b865a517dd455d8cf39ed4c57f7bdc6 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 11:34:16 -0300
Subject: [PATCH 3/7] add missing dependencies, fix postcss config

---
 packages/preview-server/package.json      |   2 +-
 packages/preview-server/postcss.config.js |   5 +-
 pnpm-lock.yaml                            | 524 +++++++++++++++++-----
 3 files changed, 417 insertions(+), 114 deletions(-)

diff --git a/packages/preview-server/package.json b/packages/preview-server/package.json
index f533ee0d91..72a431cdf7 100644
--- a/packages/preview-server/package.json
+++ b/packages/preview-server/package.json
@@ -31,6 +31,7 @@
     "@radix-ui/react-tooltip": "1.2.8",
     "@react-email/components": "workspace:*",
     "@react-email/tailwind": "workspace:2.0.1",
+    "@tailwindcss/postcss": "4.1.17",
     "@types/babel__core": "7.20.5",
     "@types/babel__traverse": "7.20.7",
     "@types/css-tree": "2.3.10",
@@ -41,7 +42,6 @@
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@types/webpack": "5.28.5",
-    "autoprefixer": "10.4.21",
     "clsx": "2.1.1",
     "colorjs.io": "0.5.2",
     "esbuild": "0.25.10",
diff --git a/packages/preview-server/postcss.config.js b/packages/preview-server/postcss.config.js
index b2d8946b3c..483f378543 100644
--- a/packages/preview-server/postcss.config.js
+++ b/packages/preview-server/postcss.config.js
@@ -1,8 +1,5 @@
-const path = require('node:path');
-
 module.exports = {
   plugins: {
-    tailwindcss: { config: path.resolve(__dirname, 'tailwind.config.ts') },
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01f27b0d86..3f3d3cdf8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,10 +52,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+        version: 6.4.1(@types/node@22.14.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
       vitest:
         specifier: 4.0.10
-        version: 4.0.10(@edge-runtime/vm@5.0.0)(@types/debug@4.1.12)(@types/node@22.14.1)(happy-dom@20.0.2)(jiti@2.5.1)(jsdom@26.1.0)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+        version: 4.0.10(@edge-runtime/vm@5.0.0)(@types/debug@4.1.12)(@types/node@22.14.1)(happy-dom@20.0.2)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
 
   apps/demo:
     dependencies:
@@ -89,7 +89,7 @@ importers:
     dependencies:
       mintlify:
         specifier: 4.2.218
-        version: 4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
+        version: 4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@24.9.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
       zod:
         specifier: 3.24.3
         version: 3.24.3
@@ -687,6 +687,9 @@ importers:
       '@react-email/tailwind':
         specifier: workspace:2.0.1
         version: link:../tailwind
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
       '@types/babel__core':
         specifier: 7.20.5
         version: 7.20.5
@@ -717,9 +720,6 @@ importers:
       '@types/webpack':
         specifier: 5.28.5
         version: 5.28.5(esbuild@0.25.10)
-      autoprefixer:
-        specifier: 10.4.21
-        version: 10.4.21(postcss@8.5.3)
       clsx:
         specifier: 2.1.1
         version: 2.1.1
@@ -1011,7 +1011,7 @@ importers:
         version: 0.8.15
       '@vitejs/plugin-react':
         specifier: 4.4.1
-        version: 4.4.1(vite@6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
+        version: 4.4.1(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
       css-tree:
         specifier: 3.1.0
         version: 3.1.0
@@ -1029,10 +1029,10 @@ importers:
         version: 5.8.3
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+        version: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@24.9.1)(rollup@4.52.2)(typescript@5.8.3)(vite@6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
+        version: 4.5.3(@types/node@24.9.1)(rollup@4.52.2)(typescript@5.8.3)(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
       yalc:
         specifier: 1.0.0-pre.53
         version: 1.0.0-pre.53
@@ -2423,6 +2423,9 @@ packages:
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -4167,6 +4170,94 @@ packages:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
 
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.17':
+    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.17':
+    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
@@ -5485,6 +5576,10 @@ packages:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -6570,6 +6665,10 @@ packages:
     resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
     hasBin: true
 
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
@@ -6689,6 +6788,76 @@ packages:
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -10461,51 +10630,51 @@ snapshots:
 
   '@inquirer/ansi@1.0.2': {}
 
-  '@inquirer/checkbox@4.3.1(@types/node@22.14.1)':
+  '@inquirer/checkbox@4.3.1(@types/node@24.9.1)':
     dependencies:
       '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
       '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
       yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/confirm@5.1.20(@types/node@22.14.1)':
+  '@inquirer/confirm@5.1.20(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/core@10.3.1(@types/node@22.14.1)':
+  '@inquirer/core@10.3.1(@types/node@24.9.1)':
     dependencies:
       '@inquirer/ansi': 1.0.2
       '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
       cli-width: 4.1.0
       mute-stream: 3.0.0
       signal-exit: 4.1.0
       wrap-ansi: 6.2.0
       yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/editor@4.2.22(@types/node@22.14.1)':
+  '@inquirer/editor@4.2.22(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/external-editor': 1.0.3(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/external-editor': 1.0.3(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/expand@4.0.22(@types/node@22.14.1)':
+  '@inquirer/expand@4.0.22(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
       yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
   '@inquirer/external-editor@1.0.3(@types/node@22.14.1)':
     dependencies:
@@ -10514,90 +10683,97 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.14.1
 
+  '@inquirer/external-editor@1.0.3(@types/node@24.9.1)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.0
+    optionalDependencies:
+      '@types/node': 24.9.1
+
   '@inquirer/figures@1.0.15': {}
 
-  '@inquirer/input@4.3.0(@types/node@22.14.1)':
+  '@inquirer/input@4.3.0(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/number@3.0.22(@types/node@22.14.1)':
+  '@inquirer/number@3.0.22(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/password@4.0.22(@types/node@22.14.1)':
+  '@inquirer/password@4.0.22(@types/node@24.9.1)':
     dependencies:
       '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/prompts@7.10.0(@types/node@22.14.1)':
-    dependencies:
-      '@inquirer/checkbox': 4.3.1(@types/node@22.14.1)
-      '@inquirer/confirm': 5.1.20(@types/node@22.14.1)
-      '@inquirer/editor': 4.2.22(@types/node@22.14.1)
-      '@inquirer/expand': 4.0.22(@types/node@22.14.1)
-      '@inquirer/input': 4.3.0(@types/node@22.14.1)
-      '@inquirer/number': 3.0.22(@types/node@22.14.1)
-      '@inquirer/password': 4.0.22(@types/node@22.14.1)
-      '@inquirer/rawlist': 4.1.10(@types/node@22.14.1)
-      '@inquirer/search': 3.2.1(@types/node@22.14.1)
-      '@inquirer/select': 4.4.1(@types/node@22.14.1)
+  '@inquirer/prompts@7.10.0(@types/node@24.9.1)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.1(@types/node@24.9.1)
+      '@inquirer/confirm': 5.1.20(@types/node@24.9.1)
+      '@inquirer/editor': 4.2.22(@types/node@24.9.1)
+      '@inquirer/expand': 4.0.22(@types/node@24.9.1)
+      '@inquirer/input': 4.3.0(@types/node@24.9.1)
+      '@inquirer/number': 3.0.22(@types/node@24.9.1)
+      '@inquirer/password': 4.0.22(@types/node@24.9.1)
+      '@inquirer/rawlist': 4.1.10(@types/node@24.9.1)
+      '@inquirer/search': 3.2.1(@types/node@24.9.1)
+      '@inquirer/select': 4.4.1(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/prompts@7.9.0(@types/node@22.14.1)':
-    dependencies:
-      '@inquirer/checkbox': 4.3.1(@types/node@22.14.1)
-      '@inquirer/confirm': 5.1.20(@types/node@22.14.1)
-      '@inquirer/editor': 4.2.22(@types/node@22.14.1)
-      '@inquirer/expand': 4.0.22(@types/node@22.14.1)
-      '@inquirer/input': 4.3.0(@types/node@22.14.1)
-      '@inquirer/number': 3.0.22(@types/node@22.14.1)
-      '@inquirer/password': 4.0.22(@types/node@22.14.1)
-      '@inquirer/rawlist': 4.1.10(@types/node@22.14.1)
-      '@inquirer/search': 3.2.1(@types/node@22.14.1)
-      '@inquirer/select': 4.4.1(@types/node@22.14.1)
+  '@inquirer/prompts@7.9.0(@types/node@24.9.1)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.1(@types/node@24.9.1)
+      '@inquirer/confirm': 5.1.20(@types/node@24.9.1)
+      '@inquirer/editor': 4.2.22(@types/node@24.9.1)
+      '@inquirer/expand': 4.0.22(@types/node@24.9.1)
+      '@inquirer/input': 4.3.0(@types/node@24.9.1)
+      '@inquirer/number': 3.0.22(@types/node@24.9.1)
+      '@inquirer/password': 4.0.22(@types/node@24.9.1)
+      '@inquirer/rawlist': 4.1.10(@types/node@24.9.1)
+      '@inquirer/search': 3.2.1(@types/node@24.9.1)
+      '@inquirer/select': 4.4.1(@types/node@24.9.1)
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/rawlist@4.1.10(@types/node@22.14.1)':
+  '@inquirer/rawlist@4.1.10(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
       yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/search@3.2.1(@types/node@22.14.1)':
+  '@inquirer/search@3.2.1(@types/node@24.9.1)':
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
       '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
       yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/select@4.4.1(@types/node@22.14.1)':
+  '@inquirer/select@4.4.1(@types/node@24.9.1)':
     dependencies:
       '@inquirer/ansi': 1.0.2
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
       '@inquirer/figures': 1.0.15
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
       yoctocolors-cjs: 2.1.3
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
-  '@inquirer/type@3.0.10(@types/node@22.14.1)':
+  '@inquirer/type@3.0.10(@types/node@24.9.1)':
     optionalDependencies:
-      '@types/node': 22.14.1
+      '@types/node': 24.9.1
 
   '@isaacs/balanced-match@4.0.1': {}
 
@@ -10625,14 +10801,19 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
@@ -10795,9 +10976,9 @@ snapshots:
 
   '@microsoft/tsdoc@0.15.1': {}
 
-  '@mintlify/cli@4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)':
+  '@mintlify/cli@4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@24.9.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)':
     dependencies:
-      '@inquirer/prompts': 7.9.0(@types/node@22.14.1)
+      '@inquirer/prompts': 7.9.0(@types/node@24.9.1)
       '@mintlify/common': 1.0.619(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       '@mintlify/link-rot': 3.0.762(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.9.3)
       '@mintlify/models': 0.0.243
@@ -10811,7 +10992,7 @@ snapshots:
       fs-extra: 11.2.0
       gray-matter: 4.0.3
       ink: 6.3.0(@types/react@19.2.6)(react@19.0.0)
-      inquirer: 12.3.0(@types/node@22.14.1)
+      inquirer: 12.3.0(@types/node@24.9.1)
       js-yaml: 4.1.0
       mdast-util-mdx-jsx: 3.2.0
       react: 19.0.0
@@ -12918,6 +13099,75 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tailwindcss/node@4.1.17':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-x64': 4.1.17
+      '@tailwindcss/oxide-freebsd-x64': 4.1.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
+
+  '@tailwindcss/postcss@4.1.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      postcss: 8.5.3
+      tailwindcss: 4.1.17
+
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
   '@tweenjs/tween.js@23.1.3': {}
@@ -13051,7 +13301,6 @@ snapshots:
   '@types/node@24.9.1':
     dependencies:
       undici-types: 7.16.0
-    optional: true
 
   '@types/normalize-path@3.0.2': {}
 
@@ -13165,14 +13414,14 @@ snapshots:
       next: 16.0.7(@babel/core@7.26.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react: 19.0.0
 
-  '@vitejs/plugin-react@4.4.1(vite@6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))':
+  '@vitejs/plugin-react@4.4.1(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))':
     dependencies:
       '@babel/core': 7.26.10
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10)
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -13185,13 +13434,13 @@ snapshots:
       chai: 6.2.1
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.10(vite@6.4.1(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))':
+  '@vitest/mocker@4.0.10(vite@6.4.1(@types/node@22.14.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))':
     dependencies:
       '@vitest/spy': 4.0.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+      vite: 6.4.1(@types/node@22.14.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
 
   '@vitest/pretty-format@4.0.10':
     dependencies:
@@ -14296,6 +14545,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -15453,12 +15707,12 @@ snapshots:
 
   inline-style-parser@0.2.4: {}
 
-  inquirer@12.3.0(@types/node@22.14.1):
+  inquirer@12.3.0(@types/node@24.9.1):
     dependencies:
-      '@inquirer/core': 10.3.1(@types/node@22.14.1)
-      '@inquirer/prompts': 7.10.0(@types/node@22.14.1)
-      '@inquirer/type': 3.0.10(@types/node@22.14.1)
-      '@types/node': 22.14.1
+      '@inquirer/core': 10.3.1(@types/node@24.9.1)
+      '@inquirer/prompts': 7.10.0(@types/node@24.9.1)
+      '@inquirer/type': 3.0.10(@types/node@24.9.1)
+      '@types/node': 24.9.1
       ansi-escapes: 4.3.2
       mute-stream: 2.0.0
       run-async: 3.0.0
@@ -15698,6 +15952,8 @@ snapshots:
 
   jiti@2.5.1: {}
 
+  jiti@2.6.1: {}
+
   jju@1.4.0: {}
 
   js-tokens@4.0.0: {}
@@ -15815,6 +16071,55 @@ snapshots:
     dependencies:
       immediate: 3.0.6
 
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.0
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
   lilconfig@2.1.0: {}
 
   lilconfig@3.1.3: {}
@@ -16481,9 +16786,9 @@ snapshots:
       minipass: 3.3.6
       yallist: 4.0.0
 
-  mintlify@4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3):
+  mintlify@4.2.218(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@24.9.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3):
     dependencies:
-      '@mintlify/cli': 4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@22.14.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
+      '@mintlify/cli': 4.0.822(@radix-ui/react-popover@1.1.15(@types/react-dom@19.0.1)(@types/react@19.2.6)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(@types/node@24.9.1)(@types/react@19.2.6)(acorn@8.15.0)(react-dom@19.0.0(react@19.0.0))(typescript@5.9.3)
     transitivePeerDependencies:
       - '@radix-ui/react-popover'
       - '@types/node'
@@ -18807,8 +19112,7 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici-types@7.16.0:
-    optional: true
+  undici-types@7.16.0: {}
 
   undici@6.21.2: {}
 
@@ -19007,7 +19311,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-plugin-dts@4.5.3(@types/node@24.9.1)(rollup@4.52.2)(typescript@5.8.3)(vite@6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)):
+  vite-plugin-dts@4.5.3(@types/node@24.9.1)(rollup@4.52.2)(typescript@5.8.3)(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)):
     dependencies:
       '@microsoft/api-extractor': 7.52.4(@types/node@24.9.1)
       '@rollup/pluginutils': 5.1.4(rollup@4.52.2)
@@ -19020,13 +19324,13 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.8.3
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite@6.4.1(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1):
+  vite@6.4.1(@types/node@22.14.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1):
     dependencies:
       esbuild: 0.25.10
       fdir: 6.5.0(picomatch@4.0.3)
@@ -19037,12 +19341,13 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.14.1
       fsevents: 2.3.3
-      jiti: 2.5.1
+      jiti: 2.6.1
+      lightningcss: 1.30.2
       terser: 5.37.0
       tsx: 4.20.3
       yaml: 2.6.1
 
-  vite@6.4.1(@types/node@24.9.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1):
+  vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1):
     dependencies:
       esbuild: 0.25.10
       fdir: 6.5.0(picomatch@4.0.3)
@@ -19053,15 +19358,16 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.9.1
       fsevents: 2.3.3
-      jiti: 2.5.1
+      jiti: 2.6.1
+      lightningcss: 1.30.2
       terser: 5.37.0
       tsx: 4.20.3
       yaml: 2.6.1
 
-  vitest@4.0.10(@edge-runtime/vm@5.0.0)(@types/debug@4.1.12)(@types/node@22.14.1)(happy-dom@20.0.2)(jiti@2.5.1)(jsdom@26.1.0)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1):
+  vitest@4.0.10(@edge-runtime/vm@5.0.0)(@types/debug@4.1.12)(@types/node@22.14.1)(happy-dom@20.0.2)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1):
     dependencies:
       '@vitest/expect': 4.0.10
-      '@vitest/mocker': 4.0.10(vite@6.4.1(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
+      '@vitest/mocker': 4.0.10(vite@6.4.1(@types/node@22.14.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1))
       '@vitest/pretty-format': 4.0.10
       '@vitest/runner': 4.0.10
       '@vitest/snapshot': 4.0.10
@@ -19078,7 +19384,7 @@ snapshots:
       tinyexec: 0.3.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 6.4.1(@types/node@22.14.1)(jiti@2.5.1)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
+      vite: 6.4.1(@types/node@22.14.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.6.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@edge-runtime/vm': 5.0.0

From f159cb81fd191be7d40c26640726708e0abd521c Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 11:53:08 -0300
Subject: [PATCH 4/7] don't import tailwind config

---
 .../caniemail/tailwind/get-tailwind-config.ts  | 18 +-----------------
 .../tailwind/get-tailwind-metadata.ts          |  4 ++--
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-config.ts b/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-config.ts
index 9297c9d79a..afb6280167 100644
--- a/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-config.ts
+++ b/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-config.ts
@@ -1,30 +1,14 @@
 import path from 'node:path';
 import type { Node } from '@babel/traverse';
 import traverse from '@babel/traverse';
+import type { TailwindConfig } from '@react-email/tailwind';
 import * as esbuild from 'esbuild';
 import type { RawSourceMap } from 'source-map-js';
-import type { Config as TailwindOriginalConfig } from 'tailwindcss';
 import type { AST } from '../../../actions/email-validation/check-compatibility';
 import { convertStackWithSourceMap } from '../../convert-stack-with-sourcemap';
 import { isErr } from '../../result';
 import { runBundledCode } from '../../run-bundled-code';
 
-export type TailwindConfig = Pick<
-  TailwindOriginalConfig,
-  | 'important'
-  | 'prefix'
-  | 'separator'
-  | 'safelist'
-  | 'blocklist'
-  | 'presets'
-  | 'future'
-  | 'experimental'
-  | 'darkMode'
-  | 'theme'
-  | 'corePlugins'
-  | 'plugins'
->;
-
 export const getTailwindConfig = async (
   sourceCode: string,
   ast: AST,
diff --git a/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts b/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts
index d6f516f2cd..51dcc80525 100644
--- a/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts
+++ b/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts
@@ -1,7 +1,7 @@
 import traverse from '@babel/traverse';
-import { setupTailwind, type TailwindSetup } from '@react-email/tailwind';
+import { setupTailwind, type TailwindConfig, type TailwindSetup } from '@react-email/tailwind';
 import type { AST } from '../../../actions/email-validation/check-compatibility';
-import { getTailwindConfig, type TailwindConfig } from './get-tailwind-config';
+import { getTailwindConfig } from './get-tailwind-config';
 
 export const getTailwindMetadata = async (
   ast: AST,

From da6e007b7aed4c6f32cfe2e8b586fe75db6003e4 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 12:14:58 -0300
Subject: [PATCH 5/7] add curosr pointer to everything

---
 packages/preview-server/src/app/globals.css | 35 ++++++++++-----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/preview-server/src/app/globals.css b/packages/preview-server/src/app/globals.css
index 43ddd5b488..2adf412b9b 100644
--- a/packages/preview-server/src/app/globals.css
+++ b/packages/preview-server/src/app/globals.css
@@ -1,23 +1,17 @@
 @import "tailwindcss";
 
 @theme {
-  --background-image-gradient: linear-gradient(
-    145.37deg,
-    rgba(255, 255, 255, 0.09) -8.75%,
-    rgba(255, 255, 255, 0.027) 83.95%
-  );
-  --background-image-gradient-hover: linear-gradient(
-    145.37deg,
-    rgba(255, 255, 255, 0.1) -8.75%,
-    rgba(255, 255, 255, 0.057) 83.95%
-  );
-  --background-image-shine: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0) 45%,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(255, 255, 255, 0) 55%,
-    rgba(255, 255, 255, 0) 100%
-  );
+  --background-image-gradient: linear-gradient(145.37deg,
+      rgba(255, 255, 255, 0.09) -8.75%,
+      rgba(255, 255, 255, 0.027) 83.95%);
+  --background-image-gradient-hover: linear-gradient(145.37deg,
+      rgba(255, 255, 255, 0.1) -8.75%,
+      rgba(255, 255, 255, 0.057) 83.95%);
+  --background-image-shine: linear-gradient(45deg,
+      rgba(255, 255, 255, 0) 45%,
+      rgba(255, 255, 255, 1) 50%,
+      rgba(255, 255, 255, 0) 55%,
+      rgba(255, 255, 255, 0) 100%);
 
   --color-cyan-1: #0091f70a;
   --color-cyan-2: #02a7f211;
@@ -116,6 +110,11 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 }
 
 html {
@@ -126,6 +125,6 @@ html {
   pointer-events: none;
 }
 
-nav > div > div > .line {
+nav>div>div>.line {
   display: none;
 }

From c0cee2ba7c1c54a6241087a5178840918a696acd Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 12:15:12 -0300
Subject: [PATCH 6/7] lint

---
 packages/preview-server/postcss.config.js     |  2 +-
 packages/preview-server/src/app/globals.css   | 30 +++++++++++--------
 .../tailwind/get-tailwind-metadata.ts         |  6 +++-
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/preview-server/postcss.config.js b/packages/preview-server/postcss.config.js
index 483f378543..e5640725a9 100644
--- a/packages/preview-server/postcss.config.js
+++ b/packages/preview-server/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/preview-server/src/app/globals.css b/packages/preview-server/src/app/globals.css
index 2adf412b9b..b058e518bc 100644
--- a/packages/preview-server/src/app/globals.css
+++ b/packages/preview-server/src/app/globals.css
@@ -1,17 +1,23 @@
 @import "tailwindcss";
 
 @theme {
-  --background-image-gradient: linear-gradient(145.37deg,
-      rgba(255, 255, 255, 0.09) -8.75%,
-      rgba(255, 255, 255, 0.027) 83.95%);
-  --background-image-gradient-hover: linear-gradient(145.37deg,
-      rgba(255, 255, 255, 0.1) -8.75%,
-      rgba(255, 255, 255, 0.057) 83.95%);
-  --background-image-shine: linear-gradient(45deg,
-      rgba(255, 255, 255, 0) 45%,
-      rgba(255, 255, 255, 1) 50%,
-      rgba(255, 255, 255, 0) 55%,
-      rgba(255, 255, 255, 0) 100%);
+  --background-image-gradient: linear-gradient(
+    145.37deg,
+    rgba(255, 255, 255, 0.09) -8.75%,
+    rgba(255, 255, 255, 0.027) 83.95%
+  );
+  --background-image-gradient-hover: linear-gradient(
+    145.37deg,
+    rgba(255, 255, 255, 0.1) -8.75%,
+    rgba(255, 255, 255, 0.057) 83.95%
+  );
+  --background-image-shine: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0) 45%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 55%,
+    rgba(255, 255, 255, 0) 100%
+  );
 
   --color-cyan-1: #0091f70a;
   --color-cyan-2: #02a7f211;
@@ -125,6 +131,6 @@ html {
   pointer-events: none;
 }
 
-nav>div>div>.line {
+nav > div > div > .line {
   display: none;
 }
diff --git a/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts b/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts
index 51dcc80525..629cb9b628 100644
--- a/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts
+++ b/packages/preview-server/src/utils/caniemail/tailwind/get-tailwind-metadata.ts
@@ -1,5 +1,9 @@
 import traverse from '@babel/traverse';
-import { setupTailwind, type TailwindConfig, type TailwindSetup } from '@react-email/tailwind';
+import {
+  setupTailwind,
+  type TailwindConfig,
+  type TailwindSetup,
+} from '@react-email/tailwind';
 import type { AST } from '../../../actions/email-validation/check-compatibility';
 import { getTailwindConfig } from './get-tailwind-config';
 

From 3740910accdffcf2615ff593d6375ce23852c1c1 Mon Sep 17 00:00:00 2001
From: gabriel miranda <gabrielmfern@outlook.com>
Date: Mon, 8 Dec 2025 12:15:31 -0300
Subject: [PATCH 7/7] add changeset

---
 .changeset/tender-buckets-sin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tender-buckets-sin.md

diff --git a/.changeset/tender-buckets-sin.md b/.changeset/tender-buckets-sin.md
new file mode 100644
index 0000000000..c7cfcef2ce
--- /dev/null
+++ b/.changeset/tender-buckets-sin.md
@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+use tailwindcss v4 in the UI