diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 3e506b7b7d..f1c1afaa8c 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -286,63 +286,6 @@ export default defineConfig({
 :::
 ::
 
-::warning
-These color aliases are not automatically defined as Tailwind CSS colors, so classes like `text-primary-500 dark:text-primary-400` won't be available by default as in Nuxt UI v2. This approach provides more flexibility and prevents overwriting of user-defined Tailwind CSS colors.<br><br>
-
-However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:
-
-::module-only
-#ui
-:::div{class="*:!mb-0 *:!mt-2.5"}
-
-```css [main.css]
-@import "tailwindcss";
-@import "@nuxt/ui";
-
-@theme {
-  --color-primary-50: var(--ui-color-primary-50);
-  --color-primary-100: var(--ui-color-primary-100);
-  --color-primary-200: var(--ui-color-primary-200);
-  --color-primary-300: var(--ui-color-primary-300);
-  --color-primary-400: var(--ui-color-primary-400);
-  --color-primary-500: var(--ui-color-primary-500);
-  --color-primary-600: var(--ui-color-primary-600);
-  --color-primary-700: var(--ui-color-primary-700);
-  --color-primary-800: var(--ui-color-primary-800);
-  --color-primary-900: var(--ui-color-primary-900);
-  --color-primary-950: var(--ui-color-primary-950);
-}
-```
-
-:::
-
-#ui-pro
-:::div{class="*:!mb-0 *:!mt-2.5"}
-
-```css [main.css]
-@import "tailwindcss";
-@import "@nuxt/ui-pro";
-
-@theme {
-  --color-primary-50: var(--ui-color-primary-50);
-  --color-primary-100: var(--ui-color-primary-100);
-  --color-primary-200: var(--ui-color-primary-200);
-  --color-primary-300: var(--ui-color-primary-300);
-  --color-primary-400: var(--ui-color-primary-400);
-  --color-primary-500: var(--ui-color-primary-500);
-  --color-primary-600: var(--ui-color-primary-600);
-  --color-primary-700: var(--ui-color-primary-700);
-  --color-primary-800: var(--ui-color-primary-800);
-  --color-primary-900: var(--ui-color-primary-900);
-  --color-primary-950: var(--ui-color-primary-950);
-}
-```
-
-:::
-::
-
-::
-
 ### Tokens
 
 Nuxt UI leverages a robust system of CSS variables as design tokens to ensure consistent and flexible component styling. These tokens form the foundation of the theming system, offering smooth support for both light and dark modes.
diff --git a/src/runtime/index.css b/src/runtime/index.css
index 725196d5b9..3621ce2c99 100644
--- a/src/runtime/index.css
+++ b/src/runtime/index.css
@@ -1,3 +1,4 @@
+@import '#build/ui.css';
 @import './keyframes.css';
 
 @variant dark (&:where(.dark, .dark *));
diff --git a/src/templates.ts b/src/templates.ts
index 82a8c01ccf..4bcd8dabef 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -69,6 +69,15 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
     })
   }
 
+  templates.push({
+    filename: 'ui.css',
+    write: true,
+    getContents: () => `@theme default {
+  ${[...(options.theme?.colors || []), 'neutral'].map(color => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join('\n\t')).join('\n\t')}
+}
+`
+  })
+
   templates.push({
     filename: 'ui/index.ts',
     write: true,