Upgrade test-app to tailwind 4

packages/eslint-config/base.ts

@@ -9,7 +9,7 @@ import globals from 'globals';
 import tsParser from '@typescript-eslint/parser';
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
 import { createNodeResolver } from 'eslint-plugin-import-x';
-import { tailwind3 } from 'tailwind-csstree';
+import { tailwind4 } from 'tailwind-csstree';
 
 export default defineConfig(
   {
@@ -79,7 +79,7 @@ export default defineConfig(
     name: 'vaul-eslint/base/css',
     language: 'css/css',
     languageOptions: {
-      customSyntax: tailwind3,
+      customSyntax: tailwind4,
     },
     files: ['**/*.css'],
     plugins: {

packages/test-app/package.json

@@ -12,23 +12,23 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@repo/typescript-config": "workspace:^",
-    "@repo/eslint-config": "workspace:^",
     "@playwright/test": "^1.57.0",
+    "@repo/eslint-config": "workspace:^",
+    "@repo/typescript-config": "workspace:^",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "autoprefixer": "10.4.15",
     "eslint": "catalog:",
     "postcss": "8.4.29",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "@tailwindcss/postcss": "^4.1.18"
   },
   "dependencies": {
     "clsx": "^2.0.0",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "tailwindcss": "3.3.3",
+    "tailwindcss": "^4.1.18",
     "vaul": "workspace:^"
   }
 }

packages/test-app/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

packages/test-app/src/app/controlled/page.tsx

@@ -8,44 +8,59 @@ export default function Page() {
   const [fullyControlled, setFullyControlled] = useState(false);
 
   return (
-    <div className="w-screen h-screen bg-white p-8 flex justify-center items-center" data-vaul-drawer-wrapper="">
+    <div
+      className="w-screen h-screen bg-white p-8 flex justify-center items-center"
+      data-vaul-drawer-wrapper=""
+    >
       <Drawer.Root open={open}>
         <Drawer.Trigger asChild onClick={() => setOpen(true)}>
           <button data-testid="trigger" className="text-2xl">
             Open Drawer
           </button>
         </Drawer.Trigger>
         <Drawer.Portal>
-          <Drawer.Overlay data-testid="overlay" className="fixed inset-0 bg-black/40" />
+          <Drawer.Overlay
+            data-testid="overlay"
+            className="fixed inset-0 bg-black/40"
+          />
           <Drawer.Content
             data-testid="content"
             className="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0"
           >
             <Drawer.Close data-testid="drawer-close">Close</Drawer.Close>
-            <button data-testid="controlled-close" onClick={() => setOpen(false)} className="text-2xl">
+            <button
+              data-testid="controlled-close"
+              onClick={() => setOpen(false)}
+              className="text-2xl"
+            >
               Close
             </button>
             <div className="p-4 bg-white rounded-t-[10px] flex-1">
-              <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+              <div className="mx-auto w-12 h-1.5 shrink-0 rounded-full bg-zinc-300 mb-8" />
               <div className="max-w-md mx-auto">
-                <Drawer.Title className="font-medium mb-4">Unstyled drawer for React.</Drawer.Title>
+                <Drawer.Title className="font-medium mb-4">
+                  Unstyled drawer for React.
+                </Drawer.Title>
                 <p className="text-zinc-600 mb-2">
-                  This component can be used as a replacement for a Dialog on mobile and tablet devices.
+                  This component can be used as a replacement for a Dialog on
+                  mobile and tablet devices.
                 </p>
                 <p className="text-zinc-600 mb-8">
                   It uses{' '}
                   <a
                     href="https://www.radix-ui.com/docs/primitives/components/dialog"
                     className="underline"
-                    target="_blank" rel="noreferrer"
+                    target="_blank"
+                    rel="noreferrer"
                   >
                     Radix&apos;s Dialog primitive
                   </a>{' '}
                   under the hood and is inspired by{' '}
                   <a
                     href="https://twitter.com/devongovett/status/1674470185783402496"
                     className="underline"
-                    target="_blank" rel="noreferrer"
+                    target="_blank"
+                    rel="noreferrer"
                   >
                     this tweet.
                   </a>
@@ -55,9 +70,10 @@ export default function Page() {
             <div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
               <div className="flex gap-6 justify-end max-w-md mx-auto">
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://github.com/emilkowalski/vaul"
-                  target="_blank" rel="noreferrer"
+                  target="_blank"
+                  rel="noreferrer"
                 >
                   GitHub
                   <svg
@@ -78,9 +94,10 @@ export default function Page() {
                   </svg>
                 </a>
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://twitter.com/emilkowalski_"
-                  target="_blank" rel="noreferrer"
+                  target="_blank"
+                  rel="noreferrer"
                 >
                   Twitter
                   <svg
@@ -105,43 +122,58 @@ export default function Page() {
           </Drawer.Content>
         </Drawer.Portal>
       </Drawer.Root>
-      <Drawer.Root open={fullyControlled} onOpenChange={(o) => setFullyControlled(o)}>
+      <Drawer.Root
+        open={fullyControlled}
+        onOpenChange={(o) => setFullyControlled(o)}
+      >
         <Drawer.Trigger asChild>
           <button data-testid="fully-controlled-trigger" className="text-2xl">
             Open Drawer
           </button>
         </Drawer.Trigger>
         <Drawer.Portal>
-          <Drawer.Overlay data-testid="overlay" className="fixed inset-0 bg-black/40" />
+          <Drawer.Overlay
+            data-testid="overlay"
+            className="fixed inset-0 bg-black/40"
+          />
           <Drawer.Content
             data-testid="fully-controlled-content"
             className="bg-zinc-100 flex flex-col rounded-t-[10px] h-[96%] mt-24 fixed bottom-0 left-0 right-0"
           >
             <Drawer.Close data-testid="drawer-close">Close</Drawer.Close>
-            <button data-testid="controlled-close" onClick={() => setOpen(false)} className="text-2xl">
+            <button
+              data-testid="controlled-close"
+              onClick={() => setOpen(false)}
+              className="text-2xl"
+            >
               Close
             </button>
             <div className="p-4 bg-white rounded-t-[10px] flex-1">
-              <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+              <div className="mx-auto w-12 h-1.5 shrink-0 rounded-full bg-zinc-300 mb-8" />
               <div className="max-w-md mx-auto">
-                <Drawer.Title className="font-medium mb-4">Unstyled drawer for React.</Drawer.Title>
+                <Drawer.Title className="font-medium mb-4">
+                  Unstyled drawer for React.
+                </Drawer.Title>
                 <p className="text-zinc-600 mb-2">
-                  This component can be used as a replacement for a Dialog on mobile and tablet devices.
+                  This component can be used as a replacement for a Dialog on
+                  mobile and tablet devices.
                 </p>
                 <p className="text-zinc-600 mb-8">
                   It uses{' '}
                   <a
                     href="https://www.radix-ui.com/docs/primitives/components/dialog"
                     className="underline"
-                    target="_blank" rel="noreferrer"
+                    target="_blank"
+                    rel="noreferrer"
                   >
                     Radix&apos;s Dialog primitive
                   </a>{' '}
                   under the hood and is inspired by{' '}
                   <a
                     href="https://twitter.com/devongovett/status/1674470185783402496"
                     className="underline"
-                    target="_blank" rel="noreferrer"
+                    target="_blank"
+                    rel="noreferrer"
                   >
                     this tweet.
                   </a>
@@ -151,9 +183,10 @@ export default function Page() {
             <div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
               <div className="flex gap-6 justify-end max-w-md mx-auto">
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://github.com/emilkowalski/vaul"
-                  target="_blank" rel="noreferrer"
+                  target="_blank"
+                  rel="noreferrer"
                 >
                   GitHub
                   <svg
@@ -174,9 +207,10 @@ export default function Page() {
                   </svg>
                 </a>
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://twitter.com/emilkowalski_"
-                  target="_blank" rel="noreferrer"
+                  target="_blank"
+                  rel="noreferrer"
                 >
                   Twitter
                   <svg

packages/test-app/src/app/default-open/page.tsx

@@ -28,7 +28,7 @@ export default function Page() {
               Close
             </button>
             <div className="p-4 bg-white rounded-t-[10px] flex-1">
-              <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+              <div className="mx-auto w-12 h-1.5 shrink-0 rounded-full bg-zinc-300 mb-8" />
               <div className="max-w-md mx-auto">
                 <Drawer.Title className="font-medium mb-4">
                   Unstyled drawer for React.
@@ -62,7 +62,7 @@ export default function Page() {
             <div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
               <div className="flex gap-6 justify-end max-w-md mx-auto">
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://github.com/emilkowalski/vaul"
                   target="_blank"
                   rel="noreferrer"
@@ -86,7 +86,7 @@ export default function Page() {
                   </svg>
                 </a>
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://twitter.com/emilkowalski_"
                   target="_blank"
                   rel="noreferrer"
@@ -134,7 +134,7 @@ export default function Page() {
               Close
             </button>
             <div className="p-4 bg-white rounded-t-[10px] flex-1">
-              <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+              <div className="mx-auto w-12 h-1.5 shrink-0 rounded-full bg-zinc-300 mb-8" />
               <div className="max-w-md mx-auto">
                 <Drawer.Title className="font-medium mb-4">
                   Unstyled drawer for React.
@@ -168,7 +168,7 @@ export default function Page() {
             <div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
               <div className="flex gap-6 justify-end max-w-md mx-auto">
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://github.com/emilkowalski/vaul"
                   target="_blank"
                   rel="noreferrer"
@@ -192,7 +192,7 @@ export default function Page() {
                   </svg>
                 </a>
                 <a
-                  className="text-xs text-zinc-600 flex items-center gap-0.25"
+                  className="text-xs text-zinc-600 flex items-center gap-px"
                   href="https://twitter.com/emilkowalski_"
                   target="_blank"
                   rel="noreferrer"

packages/test-app/src/app/different-directions/page.tsx

@@ -28,16 +28,16 @@ function DirectionalDrawer({
           className={clsx('bg-zinc-100 flex flex-col rounded-t-[10px] fixed ', {
             'bottom-0 mt-24 left-0 right-0 h-[96%]': direction === 'bottom',
             'top-0 mb-24 left-0 right-0 h-[96%]': direction === 'top',
-            'left-0 top-0 bottom-0 w-[300px] h-full': direction === 'left',
-            'right-0 top-0 bottom-0 w-[300px] h-full': direction === 'right',
+            'left-0 top-0 bottom-0 w-75 h-full': direction === 'left',
+            'right-0 top-0 bottom-0 w-75 h-full': direction === 'right',
           })}
         >
           <Drawer.Close data-testid="drawer-close">Close</Drawer.Close>
           <button data-testid="controlled-close" className="text-2xl">
             Close
           </button>
           <div className="p-4 bg-white rounded-t-[10px] flex-1">
-            <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+            <div className="mx-auto w-12 h-1.5 shrink-0 rounded-full bg-zinc-300 mb-8" />
             <div className="max-w-md mx-auto">
               <Drawer.Title className="font-medium mb-4">
                 Unstyled drawer for React.
@@ -71,7 +71,7 @@ function DirectionalDrawer({
           <div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
             <div className="flex gap-6 justify-end max-w-md mx-auto">
               <a
-                className="text-xs text-zinc-600 flex items-center gap-0.25"
+                className="text-xs text-zinc-600 flex items-center gap-px"
                 href="https://github.com/emilkowalski/vaul"
                 target="_blank"
                 rel="noreferrer"
@@ -95,7 +95,7 @@ function DirectionalDrawer({
                 </svg>
               </a>
               <a
-                className="text-xs text-zinc-600 flex items-center gap-0.25"
+                className="text-xs text-zinc-600 flex items-center gap-px"
                 href="https://twitter.com/emilkowalski_"
                 target="_blank"
                 rel="noreferrer"

packages/test-app/src/app/globals.css

@@ -1,6 +1,30 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+  --background-image-gradient-conic: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--tw-gradient-stops)
+  );
+}
+
+/*
+  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);
+  }
+}
 
 body,
 main {