Update with-tailwind with App Router. (#4849)

vercel · May 9, 2023 · 0ff46c9 · 0ff46c9 · vercel · May 9, 2023
1 parent f5c091d
commit 0ff46c9
Show file tree

Hide file tree

Showing 18 changed files with 175 additions and 2,996 deletions.
diff --git a/examples/with-tailwind/apps/docs/package.json b/examples/with-tailwind/apps/docs/package.json
@@ -9,15 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "latest",
+    "next": "^13.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ui": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.11.17",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "^18.2.4",
     "autoprefixer": "^10.4.13",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.20",

diff --git a/examples/with-tailwind/apps/docs/src/app/layout.tsx b/examples/with-tailwind/apps/docs/src/app/layout.tsx
@@ -0,0 +1,15 @@
+import "../styles/globals.css";
+// include styles from the ui package
+import "ui/styles.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="bg-zinc-900">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/...th-tailwind/apps/docs/src/pages/index.tsx → .../with-tailwind/apps/docs/src/app/page.tsx b/...th-tailwind/apps/docs/src/pages/index.tsx → .../with-tailwind/apps/docs/src/app/page.tsx
@@ -1,13 +1,14 @@
+import { Metadata } from "next";
 import Head from "next/head";
 import { Button } from "ui";
 
+export const metadata: Metadata = {
+  title: "Docs - Turborepo Example",
+};
+
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
-      <Head>
-        <title>Docs - Turborepo Example</title>
-      </Head>
-
       <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
         <h1 className="mx-auto text-center text-6xl font-extrabold tracking-tight text-white sm:text-7xl lg:text-8xl xl:text-8xl">
           Docs

diff --git a/examples/with-tailwind/apps/docs/src/pages/_app.tsx b/examples/with-tailwind/apps/docs/src/pages/_app.tsx
diff --git a/examples/with-tailwind/apps/docs/src/pages/_document.tsx b/examples/with-tailwind/apps/docs/src/pages/_document.tsx
diff --git a/examples/with-tailwind/apps/docs/tsconfig.json b/examples/with-tailwind/apps/docs/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/examples/with-tailwind/apps/web/package.json b/examples/with-tailwind/apps/web/package.json
@@ -9,15 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "latest",
+    "next": "^13.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ui": "workspace:*"
   },
   "devDependencies": {
     "@types/node": "^18.11.17",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "^18.2.4",
     "autoprefixer": "^10.4.13",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.20",

diff --git a/examples/with-tailwind/apps/web/src/app/layout.tsx b/examples/with-tailwind/apps/web/src/app/layout.tsx
@@ -0,0 +1,15 @@
+import "../styles/globals.css";
+// include styles from the ui package
+import "ui/styles.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="bg-zinc-900">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/...ith-tailwind/apps/web/src/pages/index.tsx → ...s/with-tailwind/apps/web/src/app/page.tsx b/...ith-tailwind/apps/web/src/pages/index.tsx → ...s/with-tailwind/apps/web/src/app/page.tsx
@@ -1,4 +1,4 @@
-import Head from "next/head";
+import { Metadata } from "next";
 import { Button, Card } from "ui";
 
 const CARD_CONTENT = [
@@ -19,13 +19,13 @@ const CARD_CONTENT = [
   },
 ];
 
+export const metadata: Metadata = {
+  title: "Web - Turborepo Example",
+};
+
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
-      <Head>
-        <title>Web - Turborepo Example</title>
-      </Head>
-
       <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
         <h1 className="mx-auto text-center text-6xl font-extrabold tracking-tight text-white sm:text-7xl lg:text-8xl xl:text-8xl">
           Web

diff --git a/examples/with-tailwind/apps/web/src/pages/_app.tsx b/examples/with-tailwind/apps/web/src/pages/_app.tsx
diff --git a/examples/with-tailwind/apps/web/src/pages/_document.tsx b/examples/with-tailwind/apps/web/src/pages/_document.tsx
diff --git a/examples/with-tailwind/apps/web/tsconfig.json b/examples/with-tailwind/apps/web/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/examples/with-tailwind/package.json b/examples/with-tailwind/package.json
@@ -1,18 +1,18 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "lint": "turbo run lint",
-    "clean": "turbo run clean",
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "clean": "turbo clean",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
-    "turbo": "latest"
+    "turbo": "^1.9.3"
   },
   "packageManager": "pnpm@7.15.0"
 }
diff --git a/examples/with-tailwind/packages/eslint-config-custom/package.json b/examples/with-tailwind/packages/eslint-config-custom/package.json
@@ -4,10 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint-config-next": "latest",
+    "eslint-config-next": "^13.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "7.28.0",
-    "eslint-config-turbo": "latest"
+    "eslint-config-turbo": "^1.9.3"
   },
   "publishConfig": {
     "access": "public"

diff --git a/examples/with-tailwind/packages/tsconfig/nextjs.json b/examples/with-tailwind/packages/tsconfig/nextjs.json
@@ -3,6 +3,7 @@
   "display": "Next.js",
   "extends": "./base.json",
   "compilerOptions": {
+    "plugins": [{ "name": "next" }],
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,

diff --git a/examples/with-tailwind/packages/ui/package.json b/examples/with-tailwind/packages/ui/package.json
@@ -19,7 +19,7 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.2.5",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.20",