refactor(examples): migrate to tailwind v4

zimicjs · Jan 25, 2025 · c6c55bd · c6c55bd
1 parent 61d8860
commit c6c55bd
Show file tree

Hide file tree

Showing 19 changed files with 341 additions and 277 deletions.
diff --git a/examples/with-next-js-app/package.json b/examples/with-next-js-app/package.json
@@ -24,13 +24,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.10.10",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "dotenv-cli": "^8.0.0",
     "execa": "^9.5.2",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
     "zimic": "latest"

diff --git a/examples/with-next-js-app/postcss.config.mjs b/examples/with-next-js-app/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

diff --git a/examples/with-next-js-app/src/components/Button.tsx b/examples/with-next-js-app/src/components/Button.tsx
@@ -8,7 +8,7 @@ function Button({ className, children, ...rest }: Props) {
     <button
       type="button"
       className={clsx(
-        'px-2 py-1.5 bg-emerald-300 rounded transition-all outline-none focus:ring-2 focus:ring-slate-400 hover:bg-emerald-400 active:bg-emerald-300 font-medium text-slate-900',
+        'px-2 py-1.5 bg-emerald-300 rounded-sm transition-all outline-hidden focus:ring-2 focus:ring-slate-400 hover:bg-emerald-400 active:bg-emerald-300 font-medium text-slate-900',
         className,
       )}
       {...rest}

diff --git a/examples/with-next-js-app/src/components/Input.tsx b/examples/with-next-js-app/src/components/Input.tsx
@@ -12,7 +12,7 @@ function Input({ label, className, ...rest }: Props, ref: ForwardedRef<HTMLInput
       <input
         ref={ref}
         className={clsx(
-          'ring-2 ring-slate-300 outline-none focus:ring-slate-600 hover:ring-slate-400 transition-shadow px-2 py-1.5 rounded',
+          'ring-2 ring-slate-300 outline-hidden focus:ring-slate-600 hover:ring-slate-400 transition-shadow px-2 py-1.5 rounded-sm',
           className,
         )}
         {...rest}

diff --git a/examples/with-next-js-app/src/styles/global.css b/examples/with-next-js-app/src/styles/global.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
diff --git a/examples/with-next-js-app/tailwind.config.ts b/examples/with-next-js-app/tailwind.config.ts
diff --git a/examples/with-next-js-pages/package.json b/examples/with-next-js-pages/package.json
@@ -20,13 +20,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.10.10",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "concurrently": "^9.1.2",
     "dotenv-cli": "^8.0.0",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.3",
     "zimic": "latest"
   }

diff --git a/examples/with-next-js-pages/postcss.config.mjs b/examples/with-next-js-pages/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

diff --git a/examples/with-next-js-pages/src/components/Button.tsx b/examples/with-next-js-pages/src/components/Button.tsx
@@ -8,7 +8,7 @@ function Button({ className, children, ...rest }: Props) {
     <button
       type="button"
       className={clsx(
-        'px-2 py-1.5 bg-emerald-300 rounded transition-all outline-none focus:ring-2 focus:ring-slate-400 hover:bg-emerald-400 active:bg-emerald-300 font-medium text-slate-900',
+        'px-2 py-1.5 bg-emerald-300 rounded-sm transition-all outline-hidden focus:ring-2 focus:ring-slate-400 hover:bg-emerald-400 active:bg-emerald-300 font-medium text-slate-900',
         className,
       )}
       {...rest}

diff --git a/examples/with-next-js-pages/src/components/Input.tsx b/examples/with-next-js-pages/src/components/Input.tsx
@@ -12,7 +12,7 @@ function Input({ label, className, ...rest }: Props, ref: ForwardedRef<HTMLInput
       <input
         ref={ref}
         className={clsx(
-          'ring-2 ring-slate-300 outline-none focus:ring-slate-600 hover:ring-slate-400 transition-shadow px-2 py-1.5 rounded',
+          'ring-2 ring-slate-300 outline-hidden focus:ring-slate-600 hover:ring-slate-400 transition-shadow px-2 py-1.5 rounded-sm',
           className,
         )}
         {...rest}

diff --git a/examples/with-next-js-pages/src/styles/global.css b/examples/with-next-js-pages/src/styles/global.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
diff --git a/examples/with-next-js-pages/tailwind.config.ts b/examples/with-next-js-pages/tailwind.config.ts
diff --git a/examples/with-playwright/package.json b/examples/with-playwright/package.json
@@ -23,13 +23,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.10.10",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "dotenv-cli": "^8.0.0",
     "execa": "^9.5.2",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
     "zimic": "latest"

diff --git a/examples/with-playwright/postcss.config.mjs b/examples/with-playwright/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

diff --git a/examples/with-playwright/src/components/Button.tsx b/examples/with-playwright/src/components/Button.tsx
@@ -8,7 +8,7 @@ function Button({ className, children, ...rest }: Props) {
     <button
       type="button"
       className={clsx(
-        'px-2 py-1.5 bg-emerald-300 rounded transition-all outline-none focus:ring-2 focus:ring-slate-400 hover:bg-emerald-400 active:bg-emerald-300 font-medium text-slate-900',
+        'px-2 py-1.5 bg-emerald-300 rounded-sm transition-all outline-hidden focus:ring-2 focus:ring-slate-400 hover:bg-emerald-400 active:bg-emerald-300 font-medium text-slate-900',
         className,
       )}
       {...rest}

diff --git a/examples/with-playwright/src/components/Input.tsx b/examples/with-playwright/src/components/Input.tsx
@@ -12,7 +12,7 @@ function Input({ label, className, ...rest }: Props, ref: ForwardedRef<HTMLInput
       <input
         ref={ref}
         className={clsx(
-          'ring-2 ring-slate-300 outline-none focus:ring-slate-600 hover:ring-slate-400 transition-shadow px-2 py-1.5 rounded',
+          'ring-2 ring-slate-300 outline-hidden focus:ring-slate-600 hover:ring-slate-400 transition-shadow px-2 py-1.5 rounded-sm',
           className,
         )}
         {...rest}

diff --git a/examples/with-playwright/src/styles/global.css b/examples/with-playwright/src/styles/global.css
@@ -1,3 +1,19 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/*
+  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);
+  }
+}
diff --git a/examples/with-playwright/tailwind.config.ts b/examples/with-playwright/tailwind.config.ts