diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index b4ba6a2e..30bf491f 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -15,7 +15,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 #ui
 :::div
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -43,7 +43,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 #ui-pro
 :::div
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
@@ -85,11 +85,11 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/
 #ui
 :::div
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@source "../content";
+@source "../../content"; /* Change to "../../../content" if using compatibilityVersion: 4 in nuxt.config.ts */
 ```
 
 :::
@@ -97,11 +97,11 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/
 #ui-pro
 :::div
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
-@source "../content";
+@source "../../content"; /* Change to "../../../content" if using compatibilityVersion: 4 in nuxt.config.ts */
 ```
 
 :::
@@ -297,7 +297,7 @@ You can change which shade is used for each color on light and dark mode:
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -315,7 +315,7 @@ You can change which shade is used for each color on light and dark mode:
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
@@ -351,7 +351,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -369,7 +369,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
@@ -481,7 +481,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -501,7 +501,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
@@ -542,7 +542,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -556,7 +556,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
@@ -587,7 +587,7 @@ You can customize the default container width using the default Tailwind CSS var
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -605,7 +605,7 @@ You can customize the default container width using the default Tailwind CSS var
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
diff --git a/docs/content/1.getting-started/5.fonts.md b/docs/content/1.getting-started/5.fonts.md
index e49f2a5b..43182d29 100644
--- a/docs/content/1.getting-started/5.fonts.md
+++ b/docs/content/1.getting-started/5.fonts.md
@@ -17,7 +17,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 #ui
 :::div
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
@@ -31,7 +31,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 #ui-pro
 :::div
 
-```css [main.css]
+```css [assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";