From ea15e21cdcba00e21302415829113e8c6def8a6e Mon Sep 17 00:00:00 2001
From: Stijn Slats <47820758+stijns96@users.noreply.github.com>
Date: Thu, 26 Dec 2024 11:11:02 +0100
Subject: [PATCH] feat(module): handle `tailwindMerge` config from `app.config`
 (#2902)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/1.getting-started/3.theming.md   | 46 +++++++++++++++++++
 src/module.ts                                 |  2 +
 src/runtime/components/data/Table.vue         |  2 +-
 src/runtime/components/elements/Alert.vue     |  4 +-
 src/runtime/components/elements/Avatar.vue    |  4 +-
 .../components/elements/AvatarGroup.ts        |  4 +-
 src/runtime/components/elements/Badge.vue     |  4 +-
 src/runtime/components/elements/Button.vue    |  4 +-
 .../components/elements/ButtonGroup.ts        |  4 +-
 src/runtime/components/elements/Carousel.vue  |  3 +-
 src/runtime/components/elements/Dropdown.vue  |  4 +-
 src/runtime/components/elements/Kbd.vue       |  4 +-
 src/runtime/components/elements/MeterGroup.ts |  2 +-
 src/runtime/components/forms/Checkbox.vue     |  4 +-
 src/runtime/components/forms/Input.vue        |  4 +-
 src/runtime/components/forms/InputMenu.vue    |  4 +-
 src/runtime/components/forms/Radio.vue        |  4 +-
 src/runtime/components/forms/RadioGroup.vue   |  2 +-
 src/runtime/components/forms/Range.vue        |  4 +-
 src/runtime/components/forms/Select.vue       |  4 +-
 src/runtime/components/forms/SelectMenu.vue   |  4 +-
 src/runtime/components/forms/Textarea.vue     |  4 +-
 src/runtime/components/forms/Toggle.vue       |  4 +-
 src/runtime/components/layout/Card.vue        |  4 +-
 src/runtime/components/layout/Container.vue   |  4 +-
 src/runtime/components/layout/Divider.vue     |  4 +-
 src/runtime/components/layout/Skeleton.vue    |  4 +-
 .../components/navigation/Breadcrumb.vue      |  4 +-
 .../navigation/HorizontalNavigation.vue       |  4 +-
 .../navigation/VerticalNavigation.vue         |  4 +-
 .../components/overlays/ContextMenu.vue       |  4 +-
 .../components/overlays/Notification.vue      |  4 +-
 .../components/overlays/Notifications.vue     |  4 +-
 src/runtime/utils/index.ts                    |  8 ++--
 34 files changed, 111 insertions(+), 62 deletions(-)

diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 9fe689a0..8ff1be46 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -221,6 +221,52 @@ export default defineAppConfig({
 })
 ```
 
+### Extend Tailwind Merge
+
+Tailwind Merge is a library that allows you to efficiently merge Tailwind CSS classes. It is used by this module to merge the classes from the `ui` prop, the `class` attribute, and the default classes.
+
+::callout{icon="i-heroicons-light-bulb" to="https://github.com/dcastil/tailwind-merge" target="_blank"}
+Learn more about Tailwind Merge.
+::
+
+By default, Tailwind Merge doesn't handle custom Tailwind CSS configuration like custom colors, spacing, or other utilities you may have defined. You'll need to extend it to handle your custom configuration.
+
+You can extend Tailwind Merge by using the `tailwindMerge` option in your `app.config.ts`:
+
+::code-group
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    tailwindMerge: {
+      extend: {
+        theme: {
+          spacing: ['sm', 'md', 'lg', 'xl', '2xl']
+        }
+      }
+    }
+  }
+})
+```
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      spacing: {
+        sm: '0.5rem',
+        md: '1rem',
+        lg: '1.5rem',
+        xl: '2rem',
+        '2xl': '2.5rem'
+      }
+    }
+  }
+}
+```
+::
+
 ## Dark mode
 
 All the components are styled with dark mode in mind.
diff --git a/src/module.ts b/src/module.ts
index f5d36f5d..928d0904 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,5 +1,6 @@
 import { createRequire } from 'node:module'
 import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
+import type { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from 'tailwind-merge'
 import { name, version } from '../package.json'
 import createTemplates from './templates'
 import type * as config from './runtime/ui.config'
@@ -20,6 +21,7 @@ type UI = {
   gray?: string
   colors?: string[]
   strategy?: Strategy
+  tailwindMerge?: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>
   [key: string]: any
 } & DeepPartial<typeof config, string | number | boolean>
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 07d1e4ea..57c9906f 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -144,7 +144,7 @@ import UButton from '../elements/Button.vue'
 import UProgress from '../elements/Progress.vue'
 import UCheckbox from '../forms/Checkbox.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, get } from '../../utils'
+import { get, mergeConfig } from '../../utils'
 import type { TableRow, TableColumn, Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial, Expanded } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index f3be56e4..4d038855 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -42,13 +42,13 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy, DeepPartial } from '../../types/index'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { alert } from '#ui/ui.config'
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index dd2db556..e46a0a5e 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -23,10 +23,10 @@
 <script lang="ts">
 import { defineComponent, ref, computed, toRef, watch } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/elements/AvatarGroup.ts b/src/runtime/components/elements/AvatarGroup.ts
index 5f8f5298..a8519266 100644
--- a/src/runtime/components/elements/AvatarGroup.ts
+++ b/src/runtime/components/elements/AvatarGroup.ts
@@ -1,8 +1,8 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getSlotsChildren } from '../../utils'
+import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
 import type { AvatarSize, DeepPartial, Strategy } from '../../types/index'
 import UAvatar from './Avatar.vue'
 // @ts-expect-error
diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index 833175c7..1bf5e8bb 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -19,10 +19,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { BadgeColor, BadgeSize, BadgeVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index f57e3b8d..a6cb19c0 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -19,11 +19,11 @@
 <script lang="ts">
 import { computed, defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
+import { getNuxtLinkProps, mergeConfig, nuxtLinkProps, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/elements/ButtonGroup.ts b/src/runtime/components/elements/ButtonGroup.ts
index e15bfbac..a8138848 100644
--- a/src/runtime/components/elements/ButtonGroup.ts
+++ b/src/runtime/components/elements/ButtonGroup.ts
@@ -1,8 +1,8 @@
 import { h, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getSlotsChildren } from '../../utils'
+import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
 import { useProvideButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonSize, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/elements/Carousel.vue b/src/runtime/components/elements/Carousel.vue
index 277fe905..6acc7993 100644
--- a/src/runtime/components/elements/Carousel.vue
+++ b/src/runtime/components/elements/Carousel.vue
@@ -58,9 +58,8 @@
 <script lang="ts">
 import { ref, toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge } from 'tailwind-merge'
 import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import UButton from '../elements/Button.vue'
 import type { Strategy, Button, DeepPartial } from '../../types/index'
 import { useUI } from '../../composables/useUI'
diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index 2bec6c2c..6a6a245c 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -60,13 +60,13 @@ import { defineComponent, ref, computed, watch, toRef, onMounted, resolveCompone
 import type { PropType } from 'vue'
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
 import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UKbd from '../elements/Kbd.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { mergeConfig, getNuxtLinkProps } from '../../utils'
+import { getNuxtLinkProps, mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, DropdownItem, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/elements/Kbd.vue b/src/runtime/components/elements/Kbd.vue
index 916ab3c2..54bceffe 100644
--- a/src/runtime/components/elements/Kbd.vue
+++ b/src/runtime/components/elements/Kbd.vue
@@ -7,9 +7,9 @@
 <script lang="ts">
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, KbdSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/elements/MeterGroup.ts b/src/runtime/components/elements/MeterGroup.ts
index 2670122b..c4ace51b 100644
--- a/src/runtime/components/elements/MeterGroup.ts
+++ b/src/runtime/components/elements/MeterGroup.ts
@@ -3,7 +3,7 @@ import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
 import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getSlotsChildren } from '../../utils'
+import { getSlotsChildren, mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy, MeterSize } from '../../types/index'
 import type Meter from './Meter.vue'
 // @ts-expect-error
diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue
index 1b782d6b..bcfdba5d 100644
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -32,10 +32,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index a1d20c84..1c5c5e17 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -33,12 +33,12 @@
 <script lang="ts">
 import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, looseToNumber } from '../../utils'
+import { looseToNumber, mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
index 3fce532d..a27ef24e 100644
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -103,14 +103,14 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig } from '../../utils'
+import { get, mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 6097eb9e..f7dcc1d4 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -31,10 +31,10 @@
 <script lang="ts">
 import { computed, defineComponent, inject, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index 2689fd57..42ebfe24 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -34,7 +34,7 @@ import { computed, defineComponent, provide, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, get } from '../../utils'
+import { get, mergeConfig } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 import URadio from './Radio.vue'
 // @ts-expect-error
diff --git a/src/runtime/components/forms/Range.vue b/src/runtime/components/forms/Range.vue
index 9323b069..8deec801 100644
--- a/src/runtime/components/forms/Range.vue
+++ b/src/runtime/components/forms/Range.vue
@@ -22,10 +22,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { RangeSize, RangeColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 2699759d..87820c46 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -55,11 +55,11 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, get } from '../../utils'
+import { get, mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 27ec393e..471e9fde 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -139,14 +139,14 @@ import {
 } from '@headlessui/vue'
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { get, mergeConfig } from '../../utils'
+import { get, mergeConfig, twMerge } from '../../utils'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
diff --git a/src/runtime/components/forms/Textarea.vue b/src/runtime/components/forms/Textarea.vue
index 1a9ef3c6..5904a191 100644
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -23,11 +23,11 @@
 <script lang="ts">
 import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { defu } from 'defu'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig, looseToNumber } from '../../utils'
+import { looseToNumber, mergeConfig, twMerge } from '../../utils'
 import type { TextareaSize, TextareaColor, TextareaVariant, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index e6eba575..0d87f7cd 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -33,11 +33,11 @@
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { ToggleSize, ToggleColor, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/layout/Card.vue b/src/runtime/components/layout/Card.vue
index 9f9340f1..91e7b3cc 100644
--- a/src/runtime/components/layout/Card.vue
+++ b/src/runtime/components/layout/Card.vue
@@ -19,9 +19,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/layout/Container.vue b/src/runtime/components/layout/Container.vue
index 2e2909ba..4dc61355 100644
--- a/src/runtime/components/layout/Container.vue
+++ b/src/runtime/components/layout/Container.vue
@@ -7,9 +7,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/layout/Divider.vue b/src/runtime/components/layout/Divider.vue
index a007f893..8ee0b156 100644
--- a/src/runtime/components/layout/Divider.vue
+++ b/src/runtime/components/layout/Divider.vue
@@ -21,11 +21,11 @@
 <script lang="ts">
 import { toRef, computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Avatar, DeepPartial, DividerSize, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/layout/Skeleton.vue b/src/runtime/components/layout/Skeleton.vue
index cff85cbe..4bb7286f 100644
--- a/src/runtime/components/layout/Skeleton.vue
+++ b/src/runtime/components/layout/Skeleton.vue
@@ -5,9 +5,9 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/navigation/Breadcrumb.vue b/src/runtime/components/navigation/Breadcrumb.vue
index 45363ddc..e3eb54e5 100644
--- a/src/runtime/components/navigation/Breadcrumb.vue
+++ b/src/runtime/components/navigation/Breadcrumb.vue
@@ -36,11 +36,11 @@
 <script lang="ts">
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getULinkProps } from '../../utils'
+import { getULinkProps, mergeConfig, twMerge } from '../../utils'
 import type { BreadcrumbLink, DeepPartial, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/navigation/HorizontalNavigation.vue b/src/runtime/components/navigation/HorizontalNavigation.vue
index 1586278c..161dfa10 100644
--- a/src/runtime/components/navigation/HorizontalNavigation.vue
+++ b/src/runtime/components/navigation/HorizontalNavigation.vue
@@ -54,13 +54,13 @@
 <script lang="ts">
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getULinkProps } from '../../utils'
+import { getULinkProps, mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, HorizontalNavigationLink, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 084e12bb..a9d1c070 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/src/runtime/components/navigation/VerticalNavigation.vue
@@ -55,14 +55,14 @@
 <script lang="ts">
 import { toRef, defineComponent, computed } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UBadge from '../elements/Badge.vue'
 import ULink from '../elements/Link.vue'
 import UDivider from '../layout/Divider.vue'
 import { useUI } from '../../composables/useUI'
-import { mergeConfig, getULinkProps } from '../../utils'
+import { getULinkProps, mergeConfig, twMerge } from '../../utils'
 import type { VerticalNavigationLink, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/overlays/ContextMenu.vue b/src/runtime/components/overlays/ContextMenu.vue
index 800efdad..fc6b0790 100644
--- a/src/runtime/components/overlays/ContextMenu.vue
+++ b/src/runtime/components/overlays/ContextMenu.vue
@@ -18,10 +18,10 @@ import type { PropType, Ref } from 'vue'
 import { defu } from 'defu'
 import { onClickOutside } from '@vueuse/core'
 import type { VirtualElement } from '@popperjs/core'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index 9b026d29..3c4861d1 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -45,13 +45,13 @@
 <script lang="ts">
 import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { useTimer } from '../../composables/useTimer'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { Avatar, Button, NotificationColor, NotificationAction, Strategy, DeepPartial } from '../../types/index'
 // @ts-expect-error
 import appConfig from '#build/app.config'
diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index 8ebf20c8..8e1eae3b 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -22,10 +22,10 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { twMerge, twJoin } from 'tailwind-merge'
+import { twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useToast } from '../../composables/useToast'
-import { mergeConfig } from '../../utils'
+import { mergeConfig, twMerge } from '../../utils'
 import type { DeepPartial, Notification, Strategy } from '../../types/index'
 import UNotification from './Notification.vue'
 import { useState } from '#imports'
diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
index e9e9023e..9343f03d 100644
--- a/src/runtime/utils/index.ts
+++ b/src/runtime/utils/index.ts
@@ -1,14 +1,16 @@
 import { defu, createDefu } from 'defu'
 import { extendTailwindMerge } from 'tailwind-merge'
 import type { Strategy } from '../types/index'
+// @ts-ignore
+import appConfig from '#build/app.config'
 
-const customTwMerge = extendTailwindMerge<string, string>({
+export const twMerge = extendTailwindMerge<string, string>(defu({
   extend: {
     classGroups: {
       icons: [(classPart: string) => classPart.startsWith('i-')]
     }
   }
-})
+}, appConfig.ui?.tailwindMerge))
 
 const defuTwMerge = createDefu((obj, key, value, namespace) => {
   if (namespace === 'default' || namespace.startsWith('default.')) {
@@ -28,7 +30,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
   }
   if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
     // @ts-ignore
-    obj[key] = customTwMerge(obj[key], value)
+    obj[key] = twMerge(obj[key], value)
     return true
   }
 })