diff --git a/docs/01-app/01-getting-started/05-css-and-styling.mdx b/docs/01-app/01-getting-started/05-css-and-styling.mdx
index 742cc20aadeaf4..ba655aebccf87e 100644
--- a/docs/01-app/01-getting-started/05-css-and-styling.mdx
+++ b/docs/01-app/01-getting-started/05-css-and-styling.mdx
@@ -117,7 +117,7 @@ Inside your Tailwind configuration file, add paths to the files that will use th
 ```ts filename="tailwind.config.ts" highlight={5-7} switcher
 import type { Config } from 'tailwindcss'
 
-const config: Config = {
+export default {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
     // Or if using `src` directory:
@@ -127,8 +127,7 @@ const config: Config = {
     extend: {},
   },
   plugins: [],
-}
-export default config
+} satisfies Config
 ```
 
 ```js filename="tailwind.config.js" highlight={4-6} switcher
diff --git a/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx b/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx
index 84ec16172a35e5..23c82fb2688e5b 100644
--- a/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx
+++ b/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx
@@ -20,15 +20,29 @@ npx tailwindcss init -p
 
 Inside your Tailwind configuration file, add paths to the files that will use Tailwind class names:
 
-```ts filename="tailwind.config.ts" switcher
+<AppOnly>
+
+```ts filename="tailwind.config.ts" highlight={5-7} switcher
 import type { Config } from 'tailwindcss'
 
-const config: Config = {
+export default {
   content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    // Or if using `src` directory:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config
+```
 
+```js filename="tailwind.config.js" highlight={4-6} switcher
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
@@ -37,17 +51,33 @@ const config: Config = {
   },
   plugins: [],
 }
-export default config
 ```
 
-```js filename="tailwind.config.js" switcher
+</AppOnly>
+
+<PagesOnly>
+
+```ts filename="tailwind.config.ts" highlight={5-7} switcher
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    // Or if using `src` directory:
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config
+```
+
+```js filename="tailwind.config.js" highlight={4-6} switcher
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
@@ -58,6 +88,8 @@ module.exports = {
 }
 ```
 
+</PagesOnly>
+
 You do not need to modify `postcss.config.js`.
 
 <AppOnly>