[cna] upgrade templates tailwind to v4 (#75407)

Since Tailwind v4 was released, update the create-next-app templates.
This PR made change of following process:

1. Remove tailwind config.
2. Update the `globals.css` file.
3. Add `--geist-` font CSS variable to the `globals.css` file.
4. Change `postcss` dependency to `@tailwindcss/postcss`.
5. Update postcss config.
6. Update tests.

**Note:** Removed the types for postcss added at
#63380 since it requires
additional
[postcss-load-config](https://www.npmjs.com/package/postcss-load-config)
dependency.

packages/create-next-app/templates/app-tw-empty/js/app/globals.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/create-next-app/templates/app-tw-empty/js/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/app-tw-empty/ts/app/globals.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/create-next-app/templates/app-tw-empty/ts/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/app-tw/js/app/globals.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
 
 :root {
   --background: #ffffff;

packages/create-next-app/templates/app-tw/js/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/app-tw/ts/app/globals.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
 
 :root {
   --background: #ffffff;

packages/create-next-app/templates/app-tw/ts/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/default-tw-empty/js/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/default-tw-empty/js/styles/globals.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/create-next-app/templates/default-tw-empty/ts/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/default-tw-empty/ts/styles/globals.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/create-next-app/templates/default-tw/js/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/default-tw/js/styles/globals.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
 
 :root {
   --background: #ffffff;

packages/create-next-app/templates/default-tw/ts/postcss.config.mjs

@@ -1,8 +1,5 @@
-/** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };
 
 export default config;

packages/create-next-app/templates/default-tw/ts/styles/globals.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
 
 :root {
   --background: #ffffff;

packages/create-next-app/templates/index.ts

@@ -55,11 +55,7 @@ export const installTemplate = async ({
   const templatePath = path.join(__dirname, template, mode);
   const copySource = ["**"];
   if (!eslint) copySource.push("!eslint.config.mjs");
-  if (!tailwind)
-    copySource.push(
-      mode == "ts" ? "tailwind.config.ts" : "!tailwind.config.mjs",
-      "!postcss.config.mjs",
-    );
+  if (!tailwind) copySource.push("!postcss.config.mjs");
 
   await copy(copySource, root, {
     parents: true,
@@ -164,20 +160,6 @@ export const installTemplate = async ({
           isAppTemplate ? "src/app/page" : "src/pages/index",
         ),
       );
-
-      if (tailwind) {
-        const tailwindConfigFile = path.join(
-          root,
-          mode === "ts" ? "tailwind.config.ts" : "tailwind.config.mjs",
-        );
-        await fs.writeFile(
-          tailwindConfigFile,
-          (await fs.readFile(tailwindConfigFile, "utf8")).replace(
-            /\.\/(\w+)\/\*\*\/\*\.\{js,ts,jsx,tsx,mdx\}/g,
-            "./src/$1/**/*.{js,ts,jsx,tsx,mdx}",
-          ),
-        );
-      }
     }
   }
 
@@ -223,8 +205,8 @@ export const installTemplate = async ({
   if (tailwind) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      postcss: "^8",
-      tailwindcss: "^3.4.1",
+      "@tailwindcss/postcss": "^4",
+      tailwindcss: "^4",
     };
   }