diff --git a/packages/create-next-app/templates/app-tw/js/postcss.config.cjs b/packages/create-next-app/templates/app-tw/js/postcss.config.cjs
deleted file mode 100644
index ee5f90b309025..0000000000000
--- a/packages/create-next-app/templates/app-tw/js/postcss.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
diff --git a/packages/create-next-app/templates/app-tw/js/postcss.config.mjs b/packages/create-next-app/templates/app-tw/js/postcss.config.mjs
new file mode 100644
index 0000000000000..1a69fd2a450af
--- /dev/null
+++ b/packages/create-next-app/templates/app-tw/js/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/packages/create-next-app/templates/app-tw/ts/postcss.config.cjs b/packages/create-next-app/templates/app-tw/ts/postcss.config.cjs
deleted file mode 100644
index ee5f90b309025..0000000000000
--- a/packages/create-next-app/templates/app-tw/ts/postcss.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
diff --git a/packages/create-next-app/templates/app-tw/ts/postcss.config.mjs b/packages/create-next-app/templates/app-tw/ts/postcss.config.mjs
new file mode 100644
index 0000000000000..1a69fd2a450af
--- /dev/null
+++ b/packages/create-next-app/templates/app-tw/ts/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/packages/create-next-app/templates/default-tw/js/postcss.config.cjs b/packages/create-next-app/templates/default-tw/js/postcss.config.cjs
deleted file mode 100644
index ee5f90b309025..0000000000000
--- a/packages/create-next-app/templates/default-tw/js/postcss.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
diff --git a/packages/create-next-app/templates/default-tw/js/postcss.config.mjs b/packages/create-next-app/templates/default-tw/js/postcss.config.mjs
new file mode 100644
index 0000000000000..1a69fd2a450af
--- /dev/null
+++ b/packages/create-next-app/templates/default-tw/js/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/packages/create-next-app/templates/default-tw/ts/postcss.config.cjs b/packages/create-next-app/templates/default-tw/ts/postcss.config.cjs
deleted file mode 100644
index ee5f90b309025..0000000000000
--- a/packages/create-next-app/templates/default-tw/ts/postcss.config.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
diff --git a/packages/create-next-app/templates/default-tw/ts/postcss.config.mjs b/packages/create-next-app/templates/default-tw/ts/postcss.config.mjs
new file mode 100644
index 0000000000000..1a69fd2a450af
--- /dev/null
+++ b/packages/create-next-app/templates/default-tw/ts/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
index 170916d8f7608..c4976b2f1bde5 100644
--- a/packages/create-next-app/templates/index.ts
+++ b/packages/create-next-app/templates/index.ts
@@ -51,7 +51,7 @@ export const installTemplate = async ({
   if (!tailwind)
     copySource.push(
       mode == "ts" ? "tailwind.config.ts" : "!tailwind.config.js",
-      "!postcss.config.cjs",
+      "!postcss.config.mjs",
     );
 
   await copy(copySource, root, {
diff --git a/test/integration/create-next-app/lib/specification.ts b/test/integration/create-next-app/lib/specification.ts
index 7ac5a27c6b996..ddccdcc8e3460 100644
--- a/test/integration/create-next-app/lib/specification.ts
+++ b/test/integration/create-next-app/lib/specification.ts
@@ -68,7 +68,7 @@ export const projectSpecification: ProjectSpecification = {
         'pages/_app.js',
         'pages/api/hello.js',
         'pages/index.js',
-        'postcss.config.cjs',
+        'postcss.config.mjs',
         'tailwind.config.js',
       ],
       deps: [],
@@ -80,7 +80,7 @@ export const projectSpecification: ProjectSpecification = {
         'pages/_app.tsx',
         'pages/api/hello.ts',
         'pages/index.tsx',
-        'postcss.config.cjs',
+        'postcss.config.mjs',
         'tailwind.config.ts',
         'tsconfig.json',
       ],
@@ -125,7 +125,7 @@ export const projectSpecification: ProjectSpecification = {
         'app/layout.js',
         'app/page.js',
         'jsconfig.json',
-        'postcss.config.cjs',
+        'postcss.config.mjs',
         'tailwind.config.js',
       ],
     },
@@ -143,7 +143,7 @@ export const projectSpecification: ProjectSpecification = {
         'app/layout.tsx',
         'app/page.tsx',
         'next-env.d.ts',
-        'postcss.config.cjs',
+        'postcss.config.mjs',
         'tailwind.config.ts',
         'tsconfig.json',
       ],
diff --git a/test/integration/create-next-app/lib/utils.ts b/test/integration/create-next-app/lib/utils.ts
index 0c1a9633eac9c..387defb4db363 100644
--- a/test/integration/create-next-app/lib/utils.ts
+++ b/test/integration/create-next-app/lib/utils.ts
@@ -135,7 +135,7 @@ export const shouldBeTemplateProject = ({
     files: getProjectSetting({ template, mode, setting: 'files', srcDir }),
   })
 
-  // Tailwind templates share the same files (tailwind.config.js, postcss.config.cjs)
+  // Tailwind templates share the same files (tailwind.config.js, postcss.config.mjs)
   if (template !== 'app-tw' && template !== 'default-tw') {
     projectFilesShouldNotExist({
       cwd,