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 4b1c17b367342..86d1f8382b3ed 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 84ec16172a35e..e161b60b02bef 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,10 +20,10 @@ 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
+```ts filename="tailwind.config.ts" highlight={5-10} 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}',
@@ -36,11 +36,10 @@ const config: Config = {
     extend: {},
   },
   plugins: [],
-}
-export default config
+} satisfies Config
 ```
 
-```js filename="tailwind.config.js" switcher
+```js filename="tailwind.config.js" highlight={4-9} switcher
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [