feat(preview-server): update to tailwindcss@v4 (#2720)

Author: gabrielmfern

.changeset/tender-buckets-sin.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+use tailwindcss v4 in the UI

biome.json

@@ -7,6 +7,11 @@
       }
     }
   },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "vcs": {
     "enabled": true,
     "clientKind": "git",

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",
@@ -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"

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': {},
   },
 };

packages/preview-server/src/app/globals.css

@@ -1,6 +1,127 @@
-@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);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
 
 html {
   color-scheme: dark;

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}
           >

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>

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);

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',
                       )}

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}