diff --git a/src/pages/en/guides/configuring-astro.md b/src/pages/en/guides/configuring-astro.md
index d68571cf1b74e..d12c2ed6f0fc0 100644
--- a/src/pages/en/guides/configuring-astro.md
+++ b/src/pages/en/guides/configuring-astro.md
@@ -30,7 +30,7 @@ export default {}
 
 ## Supported Config File Types
 
-Astro supports several file formats for its JavaScript configuration file: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` and `astro.config.ts`. 
+Astro supports several file formats for its JavaScript configuration file: `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` and `astro.config.ts`. We recommend using `.mjs` in most cases or `.ts` if you want to write TypeScript in your config file.
 
 TypeScript config file loading is handled using [`tsm`](https://github.com/lukeed/tsm) and will respect your project tsconfig options.
 ## Config File Resolving
diff --git a/src/pages/en/guides/styling.md b/src/pages/en/guides/styling.md
index 3c06a144db628..31767064c5cb3 100644
--- a/src/pages/en/guides/styling.md
+++ b/src/pages/en/guides/styling.md
@@ -222,9 +222,9 @@ You can also use all of the above CSS preprocessors within JS frameworks as well
 
 ## PostCSS
 
-Astro comes with PostCSS included as part of [Vite](https://vitejs.dev/guide/features.html#postcss). To configure PostCSS for your project, create a `postcss.config.js` file in the project root. You can import plugins using `require()` after installing them (for example `npm i autoprefixer`).
+Astro comes with PostCSS included as part of [Vite](https://vitejs.dev/guide/features.html#postcss). To configure PostCSS for your project, create a `postcss.config.cjs` file in the project root. You can import plugins using `require()` after installing them (for example `npm i autoprefixer`).
 
-```js title="postcss.config.js" ins={3-4}
+```js title="postcss.config.cjs" ins={3-4}
 module.exports = {
   plugins: [
     require('autoprefixer'),