hi-ogawa · hi-ogawa · Feb 8, 2025 · Feb 8, 2025 · Feb 8, 2025 · Feb 8, 2025
diff --git a/packages/react-server/examples/tailwind-v4/README.md b/packages/react-server/examples/tailwind-v4/README.md
@@ -0,0 +1 @@
+tailwind v4
diff --git a/packages/react-server/examples/tailwind-v4/app/_action.tsx b/packages/react-server/examples/tailwind-v4/app/_action.tsx
@@ -0,0 +1,11 @@
+"use server";
+
+let count = 0;
+
+export async function changeCount() {
+  count++;
+}
+
+export function getCount() {
+  return count;
+}
diff --git a/packages/react-server/examples/tailwind-v4/app/_client.tsx b/packages/react-server/examples/tailwind-v4/app/_client.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import React from "react";
+
+export function TestClient() {
+  const [count, setCount] = React.useState(0);
+
+  return <button onClick={() => setCount(count + 1)}>Client: {count}</button>;
+}
diff --git a/packages/react-server/examples/tailwind-v4/app/layout.tsx b/packages/react-server/examples/tailwind-v4/app/layout.tsx
@@ -0,0 +1,13 @@
+import type React from "react";
+import "./styles.css";
+
+export default function Layout(props: React.PropsWithChildren) {
+  return (
+    <html>
+      <body>
+        <div>[Layout]</div>
+        {props.children}
+      </body>
+    </html>
+  );
+}
diff --git a/packages/react-server/examples/tailwind-v4/app/page.tsx b/packages/react-server/examples/tailwind-v4/app/page.tsx
@@ -0,0 +1,14 @@
+import { changeCount, getCount } from "./_action";
+import { TestClient } from "./_client";
+
+export default function Page() {
+  return (
+    <>
+      <div>[Page]</div>
+      <TestClient />
+      <form action={changeCount}>
+        <button>Action: {getCount()}</button>
+      </form>
+    </>
+  );
+}
diff --git a/packages/react-server/examples/tailwind-v4/app/styles.css b/packages/react-server/examples/tailwind-v4/app/styles.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/packages/react-server/examples/tailwind-v4/package.json b/packages/react-server/examples/tailwind-v4/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@hiogawa/react-server-example-tailwind-v4",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@hiogawa/react-server": "workspace:*",
+    "next": "link:../../../react-server-next",
+    "react": "rc",
+    "react-dom": "rc",
+    "react-server-dom-webpack": "rc"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "0.0.0-insiders.d684733",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "tailwindcss": "0.0.0-insiders.d684733",
+    "vite": "latest"
+  }
+}
diff --git a/packages/react-server/examples/tailwind-v4/tsconfig.json b/packages/react-server/examples/tailwind-v4/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["next"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/packages/react-server/examples/tailwind-v4/vite.config.ts b/packages/react-server/examples/tailwind-v4/vite.config.ts
@@ -0,0 +1,7 @@
+import tailwindcss from "@tailwindcss/vite";
+import next from "next/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [next(), tailwindcss()],
+});
diff --git a/packages/react-server/src/features/assets/shared.ts b/packages/react-server/src/features/assets/shared.ts
@@ -1,2 +1,4 @@
 export const SERVER_CSS_PROXY = "virtual:server-css-proxy.js";
-export const DEV_SSR_CSS = "virtual:dev-ssr-css.css";
+// avoid .css prefix to exclude the virtual from tailwind v4's waitForRequestsIdle
+// https://github.com/tailwindlabs/tailwindcss/blob/d684733d804a0b8951d13c94fe27350271e076b6/packages/%40tailwindcss-vite/src/index.ts#L313-L322
+export const DEV_SSR_CSS = "virtual:dev-ssr-css";