chore: bump tailwind from v3 to v4 with postcss (#5580)

Author: birkskyum

e2e/react-router/basic-file-based-code-splitting/package.json

@@ -13,14 +13,14 @@
     "test:e2e": "rm -rf port*.txt; pnpm run test:e2e:verbose-routes:true && pnpm run test:e2e:verbose-routes:false"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
     "@tanstack/react-router": "workspace:^",
     "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
+    "postcss": "^8.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "postcss": "^8.5.1",
-    "autoprefixer": "^10.4.20",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.15",
     "zod": "^3.24.2"
   },
   "devDependencies": {

e2e/react-router/basic-file-based-code-splitting/postcss.config.mjs

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

e2e/react-router/basic-file-based-code-splitting/src/styles.css

@@ -1,6 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 html {
   color-scheme: light dark;

e2e/react-router/basic-file-based-code-splitting/tailwind.config.mjs

@@ -11,16 +11,16 @@
     "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
     "@tanstack/react-router": "workspace:^",
     "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
     "@tanstack/zod-adapter": "workspace:^",
+    "postcss": "^8.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
-    "postcss": "^8.5.1",
-    "autoprefixer": "^10.4.20",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.15",
     "zod": "^3.24.2"
   },
   "devDependencies": {

e2e/react-router/basic-file-based/package.json

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

e2e/react-router/basic-file-based/postcss.config.mjs

@@ -124,7 +124,7 @@ function AnchorComponent() {
             <label>
               <span>Target Anchor</span>
               <select
-                className="border border-opacity-50 rounded p-2 w-full"
+                className="border border-opacity-50 rounded-sm p-2 w-full"
                 data-testid="hash-select"
                 defaultValue={location.hash || anchors[0].id}
                 name="hash"
@@ -154,7 +154,7 @@ function AnchorComponent() {
                 <label>
                   <span>Behavior</span>
                   <select
-                    className="border border-opacity-50 rounded p-2 w-full"
+                    className="border border-opacity-50 rounded-sm p-2 w-full"
                     data-testid="behavior-select"
                     defaultValue="instant"
                     name="scrollBehavior"
@@ -170,7 +170,7 @@ function AnchorComponent() {
                 <label>
                   <span>Block</span>
                   <select
-                    className="border border-opacity-50 rounded p-2 w-full"
+                    className="border border-opacity-50 rounded-sm p-2 w-full"
                     data-testid="block-select"
                     defaultValue="start"
                     name="scrollBlock"
@@ -187,7 +187,7 @@ function AnchorComponent() {
                 <label>
                   <span>Inline</span>
                   <select
-                    className="border border-opacity-50 rounded p-2 w-full"
+                    className="border border-opacity-50 rounded-sm p-2 w-full"
                     data-testid="inline-select"
                     defaultValue="nearest"
                     name="scrollInline"
@@ -203,7 +203,7 @@ function AnchorComponent() {
           ) : null}
           <div>
             <button
-              className="bg-blue-500 rounded p-2 uppercase text-white font-black disabled:opacity-50"
+              className="bg-blue-500 rounded-sm p-2 uppercase text-white font-black disabled:opacity-50"
               data-testid="navigate-button"
             >
               Navigate

e2e/react-router/basic-file-based/src/routes/anchor.tsx

@@ -1,6 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 html {
   color-scheme: light dark;

e2e/react-router/basic-file-based/src/styles.css

@@ -11,17 +11,17 @@
     "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "workspace:^",
     "@tanstack/react-router-devtools": "workspace:^",
     "@tanstack/router-plugin": "workspace:^",
+    "postcss": "^8.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
-    "postcss": "^8.5.1",
-    "autoprefixer": "^10.4.20",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.15",
     "zod": "^3.24.2"
   },
   "devDependencies": {