diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 50cb6aac0..41886f6a7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -68,6 +68,9 @@ jobs:
- run: pnpm -C packages/react-server/examples/custom-out-dir cf-build
- run: pnpm -C packages/react-server/examples/custom-out-dir test-e2e-cf-preview
- run: pnpm -C packages/react-server/examples/custom-out-dir vc-build
+ - run: pnpm -C packages/react-server/examples/postcss-tailwind test-e2e
+ - run: pnpm -C packages/react-server/examples/postcss-tailwind build
+ - run: pnpm -C packages/react-server/examples/postcss-tailwind test-e2e-preview
test-react-server-package:
runs-on: ubuntu-latest
diff --git a/packages/react-server/examples/next/playwright.config.ts b/packages/react-server/examples/next/playwright.config.mts
similarity index 100%
rename from packages/react-server/examples/next/playwright.config.ts
rename to packages/react-server/examples/next/playwright.config.mts
diff --git a/packages/react-server/examples/next/tsconfig.json b/packages/react-server/examples/next/tsconfig.json
index d8b93235f..df6de7a87 100644
--- a/packages/react-server/examples/next/tsconfig.json
+++ b/packages/react-server/examples/next/tsconfig.json
@@ -22,6 +22,12 @@
"@/*": ["./*"]
}
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ "*.mts"
+ ],
"exclude": ["node_modules"]
}
diff --git a/packages/react-server/examples/postcss-tailwind/README.md b/packages/react-server/examples/postcss-tailwind/README.md
new file mode 100644
index 000000000..9c06fee17
--- /dev/null
+++ b/packages/react-server/examples/postcss-tailwind/README.md
@@ -0,0 +1 @@
+# postcss-tailwind
diff --git a/packages/react-server/examples/postcss-tailwind/app/_client.tsx b/packages/react-server/examples/postcss-tailwind/app/_client.tsx
new file mode 100644
index 000000000..730312b2d
--- /dev/null
+++ b/packages/react-server/examples/postcss-tailwind/app/_client.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+
+export function TestClient() {
+ const [count, setCount] = React.useState(0);
+
+ return (
+
+ );
+}
diff --git a/packages/react-server/examples/postcss-tailwind/app/layout.tsx b/packages/react-server/examples/postcss-tailwind/app/layout.tsx
new file mode 100644
index 000000000..3df6c7191
--- /dev/null
+++ b/packages/react-server/examples/postcss-tailwind/app/layout.tsx
@@ -0,0 +1,10 @@
+import "./styles.css";
+import type React from "react";
+
+export default function Layout(props: React.PropsWithChildren) {
+ return (
+
+
{props.children}
+
+ );
+}
diff --git a/packages/react-server/examples/postcss-tailwind/app/page.tsx b/packages/react-server/examples/postcss-tailwind/app/page.tsx
new file mode 100644
index 000000000..cac972943
--- /dev/null
+++ b/packages/react-server/examples/postcss-tailwind/app/page.tsx
@@ -0,0 +1,27 @@
+import { TestClient } from "./_client";
+
+export default function Page() {
+ return (
+
+
+
+
+ );
+}
+
+let serverCount = 0;
+
+function TestServer() {
+ return (
+
+ );
+}
diff --git a/packages/react-server/examples/postcss-tailwind/app/styles.css b/packages/react-server/examples/postcss-tailwind/app/styles.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/packages/react-server/examples/postcss-tailwind/app/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts b/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts
new file mode 100644
index 000000000..ac813af8d
--- /dev/null
+++ b/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts
@@ -0,0 +1,58 @@
+import { type Page, expect, test } from "@playwright/test";
+import {
+ createEditor,
+ createReloadChecker,
+ testNoJs,
+ waitForHydration,
+} from "./helper";
+
+test("basic @js", async ({ page }) => {
+ await page.goto("/");
+ await waitForHydration(page);
+ await testBasic(page);
+});
+
+testNoJs("basic @nojs", async ({ page }) => {
+ await page.goto("/");
+ await testBasic(page);
+});
+
+async function testBasic(page: Page) {
+ await expect(page.getByRole("button", { name: "Test Server:" })).toHaveCSS(
+ "padding-left",
+ "8px",
+ );
+ await expect(page.getByRole("button", { name: "Test Client:" })).toHaveCSS(
+ "padding-left",
+ "8px",
+ );
+}
+
+test("server hmr @dev", async ({ page }) => {
+ await page.goto("/");
+ await waitForHydration(page);
+ await using _ = await createReloadChecker(page);
+
+ using file = createEditor("app/page.tsx");
+ file.edit((t) =>
+ t.replace('