diff --git a/docs/content/1.getting-started/2.migration.md b/docs/content/1.getting-started/2.migration.md
index 9494885b..f380450b 100644
--- a/docs/content/1.getting-started/2.migration.md
+++ b/docs/content/1.getting-started/2.migration.md
@@ -203,15 +203,6 @@ You can also use the new [design tokens](/getting-started/theme#neutral-palette)
 ```
 ::
 
-- The `DEFAULT` shade that let you write `text-primary` no longer exists, you can use [color shades](/getting-started/theme#color-shades) instead:
-
-```diff
-<template>
--  <p class="text-primary">Hello</p>
-+  <p class="text-(--ui-primary)">Hello</p>
-</template>
-```
-
 - The `gray`, `black` and `white` in the `color` props have been removed in favor of `neutral`:
 
 ```diff
diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 9394e42a..12f803b5 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -369,7 +369,11 @@ Nuxt UI automatically creates a CSS variable for each color alias you define whi
 ::
 
 ::note
-You can use these variables in classes like `text-(--ui-primary)`, it will automatically adapt to the current color scheme.
+You can use these variables in your Tailwind CSS classes in two ways:
+- Using CSS variable syntax: `text-(--ui-primary)` or `bg-(--ui-primary)`
+- Using color alias: `text-primary` or `bg-primary`
+
+Both approaches will automatically adapt to the current color scheme, ensuring consistent styling across light and dark modes.
 ::
 
 ::tip
diff --git a/src/templates.ts b/src/templates.ts
index 07c110ef..12033ac3 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -88,8 +88,10 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
   --color-old-neutral-800: ${colors.neutral[800]};
   --color-old-neutral-900: ${colors.neutral[900]};
   --color-old-neutral-950: ${colors.neutral[950]};
-  ${[...(options.theme?.colors || []).filter(color => !colors[color as keyof typeof 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')}
-
+  ${[...(options.theme?.colors || []).filter(color => !colors[color as keyof typeof colors]), 'neutral'].map(color => [
+    color !== 'neutral' && `--color-${color}: var(--ui-${color});`,
+    ...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`)
+  ].filter(Boolean).join('\n\t')).join('\n\t')}
   --radius-xs: calc(var(--ui-radius) * 0.5);
   --radius-sm: var(--ui-radius);
   --radius-md: calc(var(--ui-radius) * 1.5);