diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index 402a807e64..bf17304a38 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -82,7 +82,7 @@ defineShortcuts({
 
 <template>
   <UApp :toaster="(appConfig.toaster as any)">
-    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
+    <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row  min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
       <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
       <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] [&>div]:min-w-min overflow-x-auto" />
 
diff --git a/src/defaults.ts b/src/defaults.ts
index ccc44df758..1fde6cd437 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -33,3 +33,10 @@ export const resolveColors = (colors?: string[]) => {
     ? [...new Set(['primary', ...colors])]
     : ['primary', 'secondary', 'success', 'info', 'warning', 'error']
 }
+
+export const getTailwindPrefix = (prefix?: string) => {
+  return {
+    variable: prefix ? prefix + '-' : '',
+    utilitie: prefix ? prefix + ':' : ''
+  }
+}
diff --git a/src/module.ts b/src/module.ts
index 39da285c63..9718280366 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -97,10 +97,16 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     async function registerModule(name: string, options: Record<string, any>) {
+      const configKeyMap: Record<string, string> = {
+        '@nuxt/icon': 'icon',
+        '@nuxt/fonts': 'fonts',
+        '@nuxtjs/color-mode': 'colorMode'
+      }
+      const key = configKeyMap[name]
       if (!hasNuxtModule(name)) {
-        await installModule(name, options)
+        await installModule(name, defu((nuxt.options as any)[key], options))
       } else {
-        (nuxt.options as any)[name] = defu((nuxt.options as any)[name], options)
+        (nuxt.options as any)[key] = defu((nuxt.options as any)[key], options)
       }
     }
 
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index a87397f058..babed710e2 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -89,7 +89,7 @@ const ui = computed(() => alert({
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
     <slot name="leading">
-      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index f83b1041ab..774eac60a9 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -60,7 +60,7 @@ extendDevtoolsMeta({ defaultProps: { label: 'Badge' } })
   <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index e3c67c36a5..c118ae2e14 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -105,7 +105,7 @@ const ui = computed(() => button({
   >
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index bba80e1cb9..05fdae73fc 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -288,7 +288,7 @@ const groups = computed(() => {
               <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
                 <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
                 <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
-                <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: item.active })" />
+                <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: item.active })" />
                 <UChip
                   v-else-if="item.chip"
                   :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 44e6660d01..c08cdaa506 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -56,7 +56,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
       <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
+        <UAvatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index 790ac2b7a7..3ca2104c66 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -62,7 +62,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
       <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
         <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, loading: true })" />
         <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
+        <UAvatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
       </slot>
 
       <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 692cdb66b3..580a07d0d8 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -176,7 +176,7 @@ onMounted(() => {
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
       <slot name="leading">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()).split(' ').pop() as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 73c54ab6cc..be1cec9af2 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -379,7 +379,7 @@ defineExpose({
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
         </slot>
       </span>
 
@@ -419,7 +419,7 @@ defineExpose({
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">
                     <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
-                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()).split(' ').pop() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
                     <UChip
                       v-else-if="item.chip"
                       :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 0be707d4e4..011c17ae3f 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -198,7 +198,7 @@ function onUpdateOpen(value: boolean) {
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as M extends true ? AcceptableValue[] : AcceptableValue)" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+          <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
         </slot>
       </span>
 
@@ -240,7 +240,7 @@ function onUpdateOpen(value: boolean) {
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">
                     <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
-                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
                     <UChip
                       v-else-if="item.chip"
                       :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 70ff58c8f4..8d63aa51ca 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -295,7 +295,7 @@ function onUpdateOpen(value: boolean) {
         <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
           <slot name="leading" :model-value="(modelValue as M extends true ? T[] : T)" :open="open" :ui="ui">
             <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-            <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+            <UAvatar v-else-if="!!avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
           </slot>
         </span>
 
@@ -351,7 +351,7 @@ function onUpdateOpen(value: boolean) {
                 <slot name="item" :item="(item as T)" :index="index">
                   <slot name="item-leading" :item="(item as T)" :index="index">
                     <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
-                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
                     <UChip
                       v-else-if="item.chip"
                       :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index a8ae683e7f..66ebba029f 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -72,7 +72,7 @@ const ui = computed(() => separator({
         <slot>
           <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
           <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-          <UAvatar v-else-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-else-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
       </div>
 
diff --git a/src/runtime/components/Tabs.vue b/src/runtime/components/Tabs.vue
index 5a2feb320a..a5a4052009 100644
--- a/src/runtime/components/Tabs.vue
+++ b/src/runtime/components/Tabs.vue
@@ -119,7 +119,7 @@ const ui = computed(() => tabs({
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
         <slot name="leading" :item="item" :index="index">
           <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
 
         <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 75a4147bee..3e80cf72e3 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -113,7 +113,7 @@ defineExpose({
     :style="{ '--height': height }"
   >
     <slot name="leading">
-      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize().split(' ').pop()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 
diff --git a/src/runtime/index.css b/src/runtime/index.css
index 725196d5b9..63d4ce86aa 100644
--- a/src/runtime/index.css
+++ b/src/runtime/index.css
@@ -1,10 +1,14 @@
 @import './keyframes.css';
 
-@variant dark (&:where(.dark, .dark *));
-
 @layer base {
   body {
-    @apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)] scheme-light dark:scheme-dark;
+    color: var(--ui-text);
+    background-color: var(--ui-bg);
+    color-scheme: light;
+  }
+
+  body:where(.dark, .dark *) {
+    color-scheme: dark;
   }
 
   :root {
@@ -14,7 +18,7 @@
     --ui-text: var(--ui-color-neutral-700);
     --ui-text-highlighted: var(--ui-color-neutral-900);
 
-    --ui-bg: var(--color-white);
+    --ui-bg: var(--ui-color-white);
     --ui-bg-muted: var(--ui-color-neutral-50);
     --ui-bg-elevated: var(--ui-color-neutral-100);
     --ui-bg-accented: var(--ui-color-neutral-200);
@@ -25,8 +29,8 @@
     --ui-border-accented: var(--ui-color-neutral-300);
     --ui-border-inverted: var(--ui-color-neutral-900);
 
-    --ui-radius: var(--radius-sm);
-    --ui-container: var(--container-7xl);
+    --ui-radius: var(--ui-radius-sm);
+    --ui-container: var(--ui-container-7xl);
   }
 
   .dark {
@@ -34,17 +38,17 @@
     --ui-text-muted: var(--ui-color-neutral-400);
     --ui-text-toned: var(--ui-color-neutral-300);
     --ui-text: var(--ui-color-neutral-200);
-    --ui-text-highlighted: var(--color-white);
+    --ui-text-highlighted: var(--ui-color-white);
 
     --ui-bg: var(--ui-color-neutral-900);
     --ui-bg-muted: var(--ui-color-neutral-800);
     --ui-bg-elevated: var(--ui-color-neutral-800);
     --ui-bg-accented: var(--ui-color-neutral-700);
-    --ui-bg-inverted: var(--color-white);
+    --ui-bg-inverted: var(--ui-color-white);
 
     --ui-border: var(--ui-color-neutral-800);
     --ui-border-muted: var(--ui-color-neutral-700);
     --ui-border-accented: var(--ui-color-neutral-700);
-    --ui-border-inverted: var(--color-white);
+    --ui-border-inverted: var(--ui-color-white);
   }
 }
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index a891564604..258529a9ba 100644
--- a/src/runtime/plugins/colors.ts
+++ b/src/runtime/plugins/colors.ts
@@ -2,6 +2,8 @@ import { computed } from 'vue'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 // FIXME: https://github.com/nuxt/module-builder/issues/141#issuecomment-2078248248
 import type {} from '#app'
+import { getRange } from '../../utils'
+import { getTailwindPrefix } from '../../defaults'
 
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
@@ -9,13 +11,44 @@ export default defineNuxtPlugin(() => {
 
   const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
+  const twPrefix = getTailwindPrefix(appConfig.ui.tailwind?.prefix)
   function generateShades(key: string, value: string) {
-    return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value}-${shade});`).join('\n  ')}`
+    return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--${twPrefix.variable}color-${value}-${shade});`).join('\n  ')}`
   }
   function generateColor(key: string, shade: number) {
     return `--ui-${key}: var(--ui-color-${key}-${shade});`
   }
 
+  /**
+   * TODO
+   *
+   * We might want to consider a better represent the file's role
+   * as a styling configuration hub ?
+   *
+   * - Handle all internal styling variables (not just colors)
+   * - Act as a bridge/adapter between external frameworks (currently tailwindcss)
+   * - Avoid direct third-party dependencies in internal style files
+   */
+  const sizes = [
+    ...Array.from({ length: 2 }, (_, i) => `${i + 2}xs`).reverse(),
+    'xs', 'sm', 'md', 'lg', 'xl',
+    ...Array.from({ length: 6 }, (_, i) => `${i + 2}xl`)
+  ]
+
+  function generateMisc() {
+    return [
+      `--ui-color-white: var(--${twPrefix.variable}color-white);`,
+      ...getRange({
+        target: sizes,
+        range: ['xs', '4xl']
+      }).map(size => `--ui-radius-${size}: var(--${twPrefix.variable}radius-${size});`),
+      ...getRange({
+        target: sizes,
+        range: ['3xs', '7xl']
+      }).map(size => `--ui-container-${size}: var(--${twPrefix.variable}container-${size});`)
+    ].join('\n  ')
+  }
+
   const root = computed(() => {
     const { neutral, ...colors } = appConfig.ui.colors
 
@@ -23,6 +56,8 @@ export default defineNuxtPlugin(() => {
   ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateShades(key, value)).join('\n  ')}
 
   ${Object.keys(colors).map(key => generateColor(key, 500)).join('\n  ')}
+
+  ${generateMisc()}
 }
 .dark {
   ${Object.keys(colors).map(key => generateColor(key, 400)).join('\n  ')}
diff --git a/src/templates.ts b/src/templates.ts
index 82a8c01ccf..3209587cae 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -5,6 +5,8 @@ import type { Nuxt, NuxtTemplate, NuxtTypeTemplate } from '@nuxt/schema'
 import type { Resolver } from '@nuxt/kit'
 import type { ModuleOptions } from './module'
 import * as theme from './theme'
+import { addTailwindPrefix } from './utils'
+import { getTailwindPrefix } from './defaults'
 
 export function buildTemplates(options: ModuleOptions) {
   return Object.entries(theme).reduce((acc, [key, component]) => {
@@ -15,6 +17,7 @@ export function buildTemplates(options: ModuleOptions) {
 
 export function getTemplates(options: ModuleOptions, uiConfig: Record<string, any>) {
   const templates: NuxtTemplate[] = []
+  const twPrefix = getTailwindPrefix(uiConfig.tailwind?.prefix)
 
   for (const component in theme) {
     templates.push({
@@ -22,7 +25,11 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
       write: true,
       getContents: async () => {
         const template = (theme as any)[component]
-        const result = typeof template === 'function' ? template(options) : template
+        let result = typeof template === 'function' ? template(options) : template
+
+        if (twPrefix.utilitie) {
+          result = addTailwindPrefix(result, twPrefix.utilitie)
+        }
 
         const variants = Object.entries(result.variants || {})
           .filter(([_, values]) => {
@@ -51,10 +58,13 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
         // For local development, import directly from theme
         if (process.env.DEV) {
           const templatePath = fileURLToPath(new URL(`./theme/${kebabCase(component)}`, import.meta.url))
+          const utilsPath = fileURLToPath(new URL('./utils', import.meta.url))
           return [
             `import template from ${JSON.stringify(templatePath)}`,
+            `import { addTailwindPrefix } from ${JSON.stringify(utilsPath)}`,
             ...generateVariantDeclarations(variants),
-            `const result = typeof template === 'function' ? template(${JSON.stringify(options, null, 2)}) : template`,
+            `let result = typeof template === 'function' ? template(${JSON.stringify(options, null, 2)}) : template`,
+            twPrefix.utilitie ? `result = addTailwindPrefix(result, ${JSON.stringify(twPrefix.utilitie)})` : '',
             `const theme = ${json}`,
             `export default result as typeof theme`
           ].join('\n\n')
@@ -93,6 +103,7 @@ type AppConfigUI = {
     neutral?: NeutralColor
   }
   icons?: Partial<typeof icons>
+  tailwind?: { prefix?: string }
 } & DeepPartial<typeof ui>
 
 declare module '@nuxt/schema' {
diff --git a/src/unplugin.ts b/src/unplugin.ts
index e684df6dd3..ece44664c1 100644
--- a/src/unplugin.ts
+++ b/src/unplugin.ts
@@ -28,6 +28,7 @@ type AppConfigUI = {
   // TODO: add type hinting for colors from `options.theme.colors`
   colors?: Record<string, Color> & { neutral?: NeutralColor }
   icons?: Partial<typeof icons>
+  tailwind?: { prefix?: string }
 } & DeepPartial<typeof ui>
 
 export interface NuxtUIOptions extends Omit<ModuleOptions, 'fonts' | 'colorMode'> {
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000000..30457467b3
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,216 @@
+/**
+ * Get a range of items from an array with flexible boundary inclusion
+ *
+ * @example
+ * // Include both boundaries
+ * getArrayRange({
+ *   source: [1, 2, 3, 4, 5],
+ *   range: [2, 4],
+ *   include: true
+ * }) // => [2, 3, 4]
+ *
+ */
+export function getRange<T>({
+  target,
+  range: [start, end],
+  include = true
+}: GetRangeOptions<T>): T[] {
+  const startIndex = target.indexOf(start)
+  const endIndex = target.indexOf(end)
+
+  if (startIndex === -1 || endIndex === -1) {
+    throw new Error('Boundary items not found in target array')
+  }
+
+  const fromIndex = Math.min(startIndex, endIndex)
+  const toIndex = Math.max(startIndex, endIndex)
+
+  if (include === true || include === 'start_end') {
+    return target.slice(fromIndex, toIndex + 1)
+  }
+  if (include === false) {
+    return target.slice(fromIndex + 1, toIndex)
+  }
+  if (include === 'start') {
+    return target.slice(fromIndex, toIndex)
+  }
+  if (include === 'end') {
+    return target.slice(fromIndex + 1, toIndex + 1)
+  }
+
+  return target.slice(fromIndex, toIndex + 1)
+}
+/** Options for getting array range */
+interface GetRangeOptions<T> {
+  /** Source array to extract range from */
+  target: readonly T[]
+  /** Range boundaries [startItem, endItem] */
+  range: [T, T]
+  /**
+   * Control how to include boundaries in the result
+   *
+   * - `true` (default): Include both boundaries
+   * - `false`: Exclude both boundaries
+   *
+   * @default true
+   */
+  include?: 'start' | 'end' | 'start_end' | boolean
+}
+
+/**
+ * Add a tailwind prefix to the theme object that will be used for tainwind-variants
+ * @see https://tailwindcss.com/docs/v4-beta#using-a-prefix
+ * @see https://github.com/nextui-org/tailwind-variants
+ */
+export function addTailwindPrefix(theme: Record<string, any>, prefix: string) {
+  /**
+   * Validate whether the path should be prefixed
+   */
+  function _validatePath(path: string) {
+    /**
+     * Prefix processing will begin from the following path
+     *
+     * path separator: array `.*`  cascade `.`
+     *
+     * @enample
+     * 1. '.base'
+     *   - `.base`                             yes
+     *   - `.base.[name]`                      yes
+     *   - `.base.[name].*`                    yes
+     * 2. `compoundVariants.*.class`
+     *   - `.compoundVariants`                 no (but will continue to check)
+     *   - `.compoundVariants.*`               no (but will continue to check)
+     *   - `.compoundVariants.*.class`         yes
+     *   - `.compoundVariants.*.class.*`       yes
+     *   - `.compoundVariants.*.class.slot`    yes
+     *   - `.compoundVariants.*.class.slot.*`  yes
+     *   - `.compoundVariants.*.[name] `       no (and will not continue to check)
+     * 3. `.defaultVariants`
+     *   - `.defaultVariants`                  no (and will not continue to check)
+     */
+    const pathWhiteList = [
+      '.base',
+      '.variants',
+      '.compoundVariants.*.class',
+      '.compoundVariants.*.className',
+      '.slots',
+      '.compoundSlots.*.class',
+      '.compoundSlots.*.className'
+    ]
+    /**
+     * Do not add prefix to these keys while be included in the theme object
+     *
+     * 1. These are used as values for child component properties, so they do not need to be processed
+     */
+    const keyBlacklist = [
+      '.avatarSize', // 1
+      '.leadingAvatarSize', // 1
+      '.itemLeadingAvatarSize' // 1
+    ] as const
+
+    const isBlockPath = keyBlacklist.some(i => path.endsWith(i))
+    const isInvalidPath = !pathWhiteList.some(i => path.startsWith(i)) && !pathWhiteList.some(i => i.startsWith(path))
+
+    return !isBlockPath && !isInvalidPath
+  }
+
+  /**
+   * Anoher version of `_validatePath` with regex pattern
+   *
+   * It is most flexible,
+   * but the rule writing is more complex and not easy to read,
+   * and the running time is longer compared to the previous one
+   */
+  // function _validatePathWithPattern(path: string) {
+  //   /**
+  //    * Path patterns to match and add prefix
+  //    *
+  //    * Path sperater:
+  //    *  - '.': cascade(object) path
+  //    *  - '.*': array path
+  //    */
+  //   const pathPatternList = [
+  //     /**
+  //      * Match base paths:
+  //      * - '.base'
+  //      * - '.base.*'
+  //      */
+  //     /^\.base(?:$|\.\*$)/,
+
+  //     /**
+  //      * Match slots paths:
+  //      * - '.slots'
+  //      * - '.slots.slot'
+  //      * - '.slots.slot.*'
+  //      */
+  //     /^\.slots(?:$|\.[^.*]+(?:\.\*)?$)/,
+
+  //     /**
+  //      * Match variants paths:
+  //      * - '.variants'
+  //      * - '.variants.[name]'
+  //      * - '.variants.[name].[value]'
+  //      * - '.variants.[name].[value].*'
+  //      * - '.variants.[name].[value].[slot]'
+  //      * - '.variants.[name].[value].[slot].*'
+  //      */
+  //     /^\.variants(?:$|\.[^.*]+(?:\.[^.*]+(?:\.[^.*]+(?:\.\*)?|\.\*)?)?$)/,
+
+  //     /**
+  //      * Match compoundVariants paths:
+  //      * - '.compoundVariants'
+  //      * - '.compoundVariants.*'
+  //      * - '.compoundVariants.*.class'
+  //      * - '.compoundVariants.*.className'
+  //      * - '.compoundVariants.*.class.[slot]'
+  //      * - '.compoundVariants.*.class.*'
+  //      * - '.compoundVariants.*.class.[slot].*'
+  //      */
+  //     /^\.compoundVariants(?:$|\.\*(?:$|\.(?:class|className)(?:\.[^.*]+(?:\.\*)?|\.\*)?$))/,
+
+  //     /**
+  //      * Match compoundSlots paths:
+  //      * - '.compoundSlots'
+  //      * - '.compoundSlots.*'
+  //      * - '.compoundSlots.*.class'
+  //      * - '.compoundSlots.*.className'
+  //      * - '.compoundSlots.*.class.*'
+  //      * - '.compoundSlots.*.className.*'
+  //      */
+  //     /^\.compoundSlots(?:$|\.\*(?:$|\.(?:class|className)(?:\.\*)?$))/
+  //   ]
+
+  //   const keyBlacklist = [
+  //     '.avatarSize', // 1
+  //     '.leadingAvatarSize', // 1
+  //     '.itemLeadingAvatarSize' // 1
+  //   ] as const
+
+  //   const isBlockPath = keyBlacklist.some(i => path.endsWith(i))
+  //   const isInvalidPath = !pathPatternList.some(pattern => pattern.test(path))
+
+  //   return !isBlockPath && !isInvalidPath
+  // }
+
+  function _addPrefix(target: any, path: string = '') {
+    // Do not check the root path
+    if (path !== '' && !_validatePath(path)) {
+      return target
+    }
+
+    if (Array.isArray(target)) {
+      return target.map<string | any>(i => _addPrefix(i, path + '.*'))
+    }
+
+    if (typeof target === 'string') {
+      return target.split(' ').map(c => c && (prefix + c)).join(' ')
+    }
+
+    return Object.entries(target ?? {}).reduce((acc, [key, value]) => {
+      acc[key] = _addPrefix(value, path + '.' + key)
+      return acc
+    }, {} as any)
+  }
+
+  return _addPrefix(theme)
+}