test: test tailwind-v4 vite plugin

hi-ogawa · hi-ogawa · Feb 8, 2025 · Feb 8, 2025 · Feb 8, 2025 · Feb 8, 2025
commit e334d35fb9c49c908b215cfb964a587a5cdf91ab
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,12 @@
+import type React from "react";
+
+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/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": "^4.0.4",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "tailwindcss": "^3.4.10",
+    "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,10 @@
+import next from "next/vite";
+import { defineConfig } from "vite";
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    next(),
+    tailwindcss(),
+  ],
+});