chore(examples): update with-tailwind (#9764)

### Description With our newfound commitment to keeping the examples great, here are the upgrades for `with-tailwind`. ### Testing Instructions `npx create-turbo@latest --example https://github.com/vercel/turborepo/tree/shew-e74f8/examples/with-tailwind`
vercel · Jan 23, 2025 · 6b56a79 · 6b56a79
1 parent 8f87dea
commit 6b56a79
Show file tree

Hide file tree

Showing 56 changed files with 971 additions and 2,139 deletions.
diff --git a/examples/with-tailwind/apps/docs/.eslintrc.js b/examples/with-tailwind/apps/docs/.eslintrc.js
diff --git a/...th-tailwind/apps/docs/src/app/favicon.ico → ...s/with-tailwind/apps/docs/app/favicon.ico b/...th-tailwind/apps/docs/src/app/favicon.ico → ...s/with-tailwind/apps/docs/app/favicon.ico
diff --git a/...ith-tailwind/apps/web/src/app/globals.css → ...s/with-tailwind/apps/docs/app/globals.css b/...ith-tailwind/apps/web/src/app/globals.css → ...s/with-tailwind/apps/docs/app/globals.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --foreground-rgb: 0, 0, 0;

diff --git a/...with-tailwind/apps/web/src/app/layout.tsx → ...es/with-tailwind/apps/docs/app/layout.tsx b/...with-tailwind/apps/web/src/app/layout.tsx → ...es/with-tailwind/apps/docs/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
-}): JSX.Element {
+}) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

diff --git a/.../with-tailwind/apps/docs/src/app/page.tsx → ...ples/with-tailwind/apps/docs/app/page.tsx b/.../with-tailwind/apps/docs/src/app/page.tsx → ...ples/with-tailwind/apps/docs/app/page.tsx
@@ -9,12 +9,12 @@ function Gradient({
   small?: boolean;
   conic?: boolean;
   className?: string;
-}): JSX.Element {
+}) {
   return (
     <span
       className={`absolute mix-blend-normal will-change-[filter] rounded-[100%] ${
         small ? "blur-[32px]" : "blur-[75px]"
-      } ${conic ? "bg-glow-conic" : ""} ${className}`}
+      } ${conic ? "bg-glow-conic" : ""} ${className ?? ""}`}
     />
   );
 }
@@ -43,7 +43,7 @@ const LINKS = [
   },
 ];
 
-export default function Page(): JSX.Element {
+export default function Page() {
   return (
     <main className="flex flex-col items-center justify-between min-h-screen p-24">
       <div className="z-10 items-center justify-between w-full max-w-5xl font-mono text-sm lg:flex">

diff --git a/examples/with-tailwind/apps/docs/eslint.config.js b/examples/with-tailwind/apps/docs/eslint.config.js
@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@repo/eslint-config/next-js";
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig;
diff --git a/examples/with-tailwind/apps/docs/next-env.d.ts b/examples/with-tailwind/apps/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/with-tailwind/apps/docs/next.config.js b/examples/with-tailwind/apps/docs/next.config.js
diff --git a/examples/with-tailwind/apps/docs/next.config.ts b/examples/with-tailwind/apps/docs/next.config.ts
@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+export default nextConfig;
diff --git a/examples/with-tailwind/apps/docs/package.json b/examples/with-tailwind/apps/docs/package.json
@@ -1,16 +1,18 @@
 {
   "name": "docs",
   "version": "1.0.0",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit"
+    "lint": "next lint --max-warnings 0",
+    "check-types": "tsc --noEmit"
   },
   "dependencies": {
     "@repo/ui": "workspace:*",
+    "@tailwindcss/postcss": "^4.0.0",
     "next": "^15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -25,7 +27,7 @@
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.7.3"
   }
 }
diff --git a/examples/with-tailwind/apps/docs/postcss.config.js b/examples/with-tailwind/apps/docs/postcss.config.js
@@ -1,9 +1,5 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-module.exports = {
+export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/examples/with-tailwind/apps/docs/tailwind.config.ts b/examples/with-tailwind/apps/docs/tailwind.config.ts
@@ -4,7 +4,7 @@ import type { Config } from "tailwindcss";
 import sharedConfig from "@repo/tailwind-config";
 
 const config: Pick<Config, "content" | "presets"> = {
-  content: ["./src/app/**/*.tsx"],
+  content: ["./app/**/*.tsx"],
   presets: [sharedConfig],
 };
 

diff --git a/examples/with-tailwind/apps/docs/tsconfig.json b/examples/with-tailwind/apps/docs/tsconfig.json
@@ -1,8 +1,18 @@
 {
   "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    "next.config.ts",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/examples/with-tailwind/apps/web/.eslintrc.js b/examples/with-tailwind/apps/web/.eslintrc.js
diff --git a/...ith-tailwind/apps/web/src/app/favicon.ico → ...es/with-tailwind/apps/web/app/favicon.ico b/...ith-tailwind/apps/web/src/app/favicon.ico → ...es/with-tailwind/apps/web/app/favicon.ico
diff --git a/...th-tailwind/apps/docs/src/app/globals.css → ...es/with-tailwind/apps/web/app/globals.css b/...th-tailwind/apps/docs/src/app/globals.css → ...es/with-tailwind/apps/web/app/globals.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --foreground-rgb: 0, 0, 0;

diff --git a/...ith-tailwind/apps/docs/src/app/layout.tsx → ...les/with-tailwind/apps/web/app/layout.tsx b/...ith-tailwind/apps/docs/src/app/layout.tsx → ...les/with-tailwind/apps/web/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
-}): JSX.Element {
+}) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>

diff --git a/...s/with-tailwind/apps/web/src/app/page.tsx → examples/with-tailwind/apps/web/app/page.tsx b/...s/with-tailwind/apps/web/src/app/page.tsx → examples/with-tailwind/apps/web/app/page.tsx
@@ -9,12 +9,12 @@ function Gradient({
   small?: boolean;
   conic?: boolean;
   className?: string;
-}): JSX.Element {
+}) {
   return (
     <span
       className={`absolute mix-blend-normal will-change-[filter] rounded-[100%] ${
         small ? "blur-[32px]" : "blur-[75px]"
-      } ${conic ? "bg-glow-conic" : ""} ${className}`}
+      } ${conic ? "bg-glow-conic" : ""} ${className ?? ""}`}
     />
   );
 }
@@ -43,7 +43,7 @@ const LINKS = [
   },
 ];
 
-export default function Page(): JSX.Element {
+export default function Page() {
   return (
     <main className="flex flex-col items-center justify-between min-h-screen p-24">
       <div className="z-10 items-center justify-between w-full max-w-5xl font-mono text-sm lg:flex">

diff --git a/examples/with-tailwind/apps/web/eslint.config.js b/examples/with-tailwind/apps/web/eslint.config.js
@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@repo/eslint-config/next-js";
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig;
diff --git a/examples/with-tailwind/apps/web/next-env.d.ts b/examples/with-tailwind/apps/web/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/with-tailwind/apps/web/next.config.js b/examples/with-tailwind/apps/web/next.config.js
diff --git a/examples/with-tailwind/apps/web/next.config.ts b/examples/with-tailwind/apps/web/next.config.ts
@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+export default nextConfig;
diff --git a/examples/with-tailwind/apps/web/package.json b/examples/with-tailwind/apps/web/package.json
@@ -1,16 +1,18 @@
 {
   "name": "web",
   "version": "1.0.0",
+  "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "type-check": "tsc --noEmit"
+    "lint": "next lint --max-warnings 0",
+    "check-types": "tsc --noEmit"
   },
   "dependencies": {
     "@repo/ui": "workspace:*",
+    "@tailwindcss/postcss": "^4.0.0",
     "next": "^15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -25,7 +27,7 @@
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.7.3"
   }
 }
diff --git a/examples/with-tailwind/apps/web/postcss.config.js b/examples/with-tailwind/apps/web/postcss.config.js
@@ -1,9 +1,5 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-module.exports = {
+export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/examples/with-tailwind/apps/web/tailwind.config.ts b/examples/with-tailwind/apps/web/tailwind.config.ts
@@ -4,7 +4,7 @@ import type { Config } from "tailwindcss";
 import sharedConfig from "@repo/tailwind-config";
 
 const config: Pick<Config, "content" | "presets"> = {
-  content: ["./src/app/**/*.tsx"],
+  content: ["./app/**/*.tsx"],
   presets: [sharedConfig],
 };
 

diff --git a/examples/with-tailwind/apps/web/tsconfig.json b/examples/with-tailwind/apps/web/tsconfig.json
@@ -1,8 +1,18 @@
 {
   "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    "next.config.ts",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/examples/with-tailwind/package.json b/examples/with-tailwind/package.json
@@ -1,11 +1,11 @@
 {
+  "name": "with-tailwind",
   "private": true,
   "scripts": {
     "build": "turbo build",
-    "dev": "turbo dev",
-    "lint": "turbo lint",
-    "type-check": "turbo type-check",
-    "clean": "turbo clean",
+    "dev": "turbo run dev",
+    "lint": "turbo run lint",
+    "check-types": "turbo check-types",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
@@ -16,6 +16,5 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=18"
-  },
-  "name": "with-tailwind"
+  }
 }
diff --git a/examples/with-tailwind/packages/config-eslint/library.js b/examples/with-tailwind/packages/config-eslint/library.js