Skip to content

Commit ea15e21

Browse files
stijns96benjamincanac
stijns96
and
benjamincanac
authoredDec 26, 2024··
feat(module): handle tailwindMerge config from app.config (#2902)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
·
v2.21.1v2.21.0
1 parent b7153cd commit ea15e21

34 files changed

+111
-62
lines changed
 

‎docs/content/1.getting-started/3.theming.md

+46
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,52 @@ export default defineAppConfig({
221221
})
222222
```
223223

224+
### Extend Tailwind Merge
225+
226+
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.
227+
228+
::callout{icon="i-heroicons-light-bulb" to="https://github.com/dcastil/tailwind-merge" target="_blank"}
229+
Learn more about Tailwind Merge.
230+
::
231+
232+
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.
233+
234+
You can extend Tailwind Merge by using the `tailwindMerge` option in your `app.config.ts`:
235+
236+
::code-group
237+
```ts [app.config.ts]
238+
export default defineAppConfig({
239+
ui: {
240+
tailwindMerge: {
241+
extend: {
242+
theme: {
243+
spacing: ['sm', 'md', 'lg', 'xl', '2xl']
244+
}
245+
}
246+
}
247+
}
248+
})
249+
```
250+
251+
```ts [tailwind.config.ts]
252+
import type { Config } from 'tailwindcss'
253+
254+
export default <Partial<Config>>{
255+
theme: {
256+
extend: {
257+
spacing: {
258+
sm: '0.5rem',
259+
md: '1rem',
260+
lg: '1.5rem',
261+
xl: '2rem',
262+
'2xl': '2.5rem'
263+
}
264+
}
265+
}
266+
}
267+
```
268+
::
269+
224270
## Dark mode
225271

226272
All the components are styled with dark mode in mind.

‎src/module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createRequire } from 'node:module'
22
import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
3+
import type { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from 'tailwind-merge'
34
import { name, version } from '../package.json'
45
import createTemplates from './templates'
56
import type * as config from './runtime/ui.config'
@@ -20,6 +21,7 @@ type UI = {
2021
gray?: string
2122
colors?: string[]
2223
strategy?: Strategy
24+
tailwindMerge?: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>
2325
[key: string]: any
2426
} & DeepPartial<typeof config, string | number | boolean>
2527

‎src/runtime/components/data/Table.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ import UButton from '../elements/Button.vue'
144144
import UProgress from '../elements/Progress.vue'
145145
import UCheckbox from '../forms/Checkbox.vue'
146146
import { useUI } from '../../composables/useUI'
147-
import { mergeConfig, get } from '../../utils'
147+
import { get, mergeConfig } from '../../utils'
148148
import type { TableRow, TableColumn, Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial, Expanded } from '../../types/index'
149149
// @ts-expect-error
150150
import appConfig from '#build/app.config'

‎src/runtime/components/elements/Alert.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,13 @@
4242
<script lang="ts">
4343
import { computed, toRef, defineComponent } from 'vue'
4444
import type { PropType } from 'vue'
45-
import { twMerge, twJoin } from 'tailwind-merge'
45+
import { twJoin } from 'tailwind-merge'
4646
import UIcon from '../elements/Icon.vue'
4747
import UAvatar from '../elements/Avatar.vue'
4848
import UButton from '../elements/Button.vue'
4949
import { useUI } from '../../composables/useUI'
5050
import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy, DeepPartial } from '../../types/index'
51-
import { mergeConfig } from '../../utils'
51+
import { mergeConfig, twMerge } from '../../utils'
5252
// @ts-expect-error
5353
import appConfig from '#build/app.config'
5454
import { alert } from '#ui/ui.config'

‎src/runtime/components/elements/Avatar.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
<script lang="ts">
2424
import { defineComponent, ref, computed, toRef, watch } from 'vue'
2525
import type { PropType } from 'vue'
26-
import { twMerge, twJoin } from 'tailwind-merge'
26+
import { twJoin } from 'tailwind-merge'
2727
import UIcon from '../elements/Icon.vue'
2828
import { useUI } from '../../composables/useUI'
29-
import { mergeConfig } from '../../utils'
29+
import { mergeConfig, twMerge } from '../../utils'
3030
import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy, DeepPartial } from '../../types/index'
3131
// @ts-expect-error
3232
import appConfig from '#build/app.config'

‎src/runtime/components/elements/AvatarGroup.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
22
import type { PropType } from 'vue'
3-
import { twMerge, twJoin } from 'tailwind-merge'
3+
import { twJoin } from 'tailwind-merge'
44
import { useUI } from '../../composables/useUI'
5-
import { mergeConfig, getSlotsChildren } from '../../utils'
5+
import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
66
import type { AvatarSize, DeepPartial, Strategy } from '../../types/index'
77
import UAvatar from './Avatar.vue'
88
// @ts-expect-error

‎src/runtime/components/elements/Badge.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
<script lang="ts">
2020
import { computed, toRef, defineComponent } from 'vue'
2121
import type { PropType } from 'vue'
22-
import { twMerge, twJoin } from 'tailwind-merge'
22+
import { twJoin } from 'tailwind-merge'
2323
import UIcon from '../elements/Icon.vue'
2424
import { useUI } from '../../composables/useUI'
25-
import { mergeConfig } from '../../utils'
25+
import { mergeConfig, twMerge } from '../../utils'
2626
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
2727
import type { BadgeColor, BadgeSize, BadgeVariant, DeepPartial, Strategy } from '../../types/index'
2828
// @ts-expect-error

‎src/runtime/components/elements/Button.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
<script lang="ts">
2020
import { computed, defineComponent, toRef } from 'vue'
2121
import type { PropType } from 'vue'
22-
import { twMerge, twJoin } from 'tailwind-merge'
22+
import { twJoin } from 'tailwind-merge'
2323
import UIcon from '../elements/Icon.vue'
2424
import ULink from '../elements/Link.vue'
2525
import { useUI } from '../../composables/useUI'
26-
import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
26+
import { getNuxtLinkProps, mergeConfig, nuxtLinkProps, twMerge } from '../../utils'
2727
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
2828
import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
2929
// @ts-expect-error

‎src/runtime/components/elements/ButtonGroup.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { h, computed, toRef, defineComponent } from 'vue'
22
import type { PropType } from 'vue'
3-
import { twMerge, twJoin } from 'tailwind-merge'
3+
import { twJoin } from 'tailwind-merge'
44
import { useUI } from '../../composables/useUI'
5-
import { mergeConfig, getSlotsChildren } from '../../utils'
5+
import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
66
import { useProvideButtonGroup } from '../../composables/useButtonGroup'
77
import type { ButtonSize, DeepPartial, Strategy } from '../../types/index'
88
// @ts-expect-error

‎src/runtime/components/elements/Carousel.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,8 @@
5858
<script lang="ts">
5959
import { ref, toRef, computed, defineComponent } from 'vue'
6060
import type { PropType } from 'vue'
61-
import { twMerge } from 'tailwind-merge'
6261
import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
63-
import { mergeConfig } from '../../utils'
62+
import { mergeConfig, twMerge } from '../../utils'
6463
import UButton from '../elements/Button.vue'
6564
import type { Strategy, Button, DeepPartial } from '../../types/index'
6665
import { useUI } from '../../composables/useUI'

‎src/runtime/components/elements/Dropdown.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@ import { defineComponent, ref, computed, watch, toRef, onMounted, resolveCompone
6060
import type { PropType } from 'vue'
6161
import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
6262
import { defu } from 'defu'
63-
import { twMerge, twJoin } from 'tailwind-merge'
63+
import { twJoin } from 'tailwind-merge'
6464
import UIcon from '../elements/Icon.vue'
6565
import UAvatar from '../elements/Avatar.vue'
6666
import UKbd from '../elements/Kbd.vue'
6767
import { useUI } from '../../composables/useUI'
6868
import { usePopper } from '../../composables/usePopper'
69-
import { mergeConfig, getNuxtLinkProps } from '../../utils'
69+
import { getNuxtLinkProps, mergeConfig, twMerge } from '../../utils'
7070
import type { DeepPartial, DropdownItem, PopperOptions, Strategy } from '../../types/index'
7171
// @ts-expect-error
7272
import appConfig from '#build/app.config'

‎src/runtime/components/elements/Kbd.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<script lang="ts">
88
import { toRef, defineComponent, computed } from 'vue'
99
import type { PropType } from 'vue'
10-
import { twMerge, twJoin } from 'tailwind-merge'
10+
import { twJoin } from 'tailwind-merge'
1111
import { useUI } from '../../composables/useUI'
12-
import { mergeConfig } from '../../utils'
12+
import { mergeConfig, twMerge } from '../../utils'
1313
import type { DeepPartial, KbdSize, Strategy } from '../../types/index'
1414
// @ts-expect-error
1515
import appConfig from '#build/app.config'

‎src/runtime/components/elements/MeterGroup.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
33
import { twJoin } from 'tailwind-merge'
44
import UIcon from '../elements/Icon.vue'
55
import { useUI } from '../../composables/useUI'
6-
import { mergeConfig, getSlotsChildren } from '../../utils'
6+
import { getSlotsChildren, mergeConfig } from '../../utils'
77
import type { DeepPartial, Strategy, MeterSize } from '../../types/index'
88
import type Meter from './Meter.vue'
99
// @ts-expect-error

‎src/runtime/components/forms/Checkbox.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@
3232
<script lang="ts">
3333
import { computed, toRef, defineComponent } from 'vue'
3434
import type { PropType } from 'vue'
35-
import { twMerge, twJoin } from 'tailwind-merge'
35+
import { twJoin } from 'tailwind-merge'
3636
import { useUI } from '../../composables/useUI'
3737
import { useFormGroup } from '../../composables/useFormGroup'
38-
import { mergeConfig } from '../../utils'
38+
import { mergeConfig, twMerge } from '../../utils'
3939
import type { DeepPartial, Strategy } from '../../types/index'
4040
// @ts-expect-error
4141
import appConfig from '#build/app.config'

‎src/runtime/components/forms/Input.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@
3333
<script lang="ts">
3434
import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
3535
import type { PropType } from 'vue'
36-
import { twMerge, twJoin } from 'tailwind-merge'
36+
import { twJoin } from 'tailwind-merge'
3737
import { defu } from 'defu'
3838
import UIcon from '../elements/Icon.vue'
3939
import { useUI } from '../../composables/useUI'
4040
import { useFormGroup } from '../../composables/useFormGroup'
41-
import { mergeConfig, looseToNumber } from '../../utils'
41+
import { looseToNumber, mergeConfig, twMerge } from '../../utils'
4242
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
4343
import type { InputSize, InputColor, InputVariant, Strategy, DeepPartial } from '../../types/index'
4444
// @ts-expect-error

‎src/runtime/components/forms/InputMenu.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,14 @@ import {
103103
} from '@headlessui/vue'
104104
import { computedAsync, useDebounceFn } from '@vueuse/core'
105105
import { defu } from 'defu'
106-
import { twMerge, twJoin } from 'tailwind-merge'
106+
import { twJoin } from 'tailwind-merge'
107107
import { isEqual } from 'ohash'
108108
import UIcon from '../elements/Icon.vue'
109109
import UAvatar from '../elements/Avatar.vue'
110110
import { useUI } from '../../composables/useUI'
111111
import { usePopper } from '../../composables/usePopper'
112112
import { useFormGroup } from '../../composables/useFormGroup'
113-
import { get, mergeConfig } from '../../utils'
113+
import { get, mergeConfig, twMerge } from '../../utils'
114114
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
115115
import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
116116
// @ts-expect-error

‎src/runtime/components/forms/Radio.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
<script lang="ts">
3232
import { computed, defineComponent, inject, toRef } from 'vue'
3333
import type { PropType } from 'vue'
34-
import { twMerge, twJoin } from 'tailwind-merge'
34+
import { twJoin } from 'tailwind-merge'
3535
import { useUI } from '../../composables/useUI'
3636
import { useFormGroup } from '../../composables/useFormGroup'
37-
import { mergeConfig } from '../../utils'
37+
import { mergeConfig, twMerge } from '../../utils'
3838
import type { DeepPartial, Strategy } from '../../types/index'
3939
// @ts-expect-error
4040
import appConfig from '#build/app.config'

‎src/runtime/components/forms/RadioGroup.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { computed, defineComponent, provide, toRef } from 'vue'
3434
import type { PropType } from 'vue'
3535
import { useUI } from '../../composables/useUI'
3636
import { useFormGroup } from '../../composables/useFormGroup'
37-
import { mergeConfig, get } from '../../utils'
37+
import { get, mergeConfig } from '../../utils'
3838
import type { DeepPartial, Strategy } from '../../types/index'
3939
import URadio from './Radio.vue'
4040
// @ts-expect-error

‎src/runtime/components/forms/Range.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
<script lang="ts">
2323
import { computed, toRef, defineComponent } from 'vue'
2424
import type { PropType } from 'vue'
25-
import { twMerge, twJoin } from 'tailwind-merge'
25+
import { twJoin } from 'tailwind-merge'
2626
import { useUI } from '../../composables/useUI'
2727
import { useFormGroup } from '../../composables/useFormGroup'
28-
import { mergeConfig } from '../../utils'
28+
import { mergeConfig, twMerge } from '../../utils'
2929
import type { RangeSize, RangeColor, Strategy, DeepPartial } from '../../types/index'
3030
// @ts-expect-error
3131
import appConfig from '#build/app.config'

‎src/runtime/components/forms/Select.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@
5555
<script lang="ts">
5656
import { computed, toRef, defineComponent } from 'vue'
5757
import type { PropType, ComputedRef } from 'vue'
58-
import { twMerge, twJoin } from 'tailwind-merge'
58+
import { twJoin } from 'tailwind-merge'
5959
import UIcon from '../elements/Icon.vue'
6060
import { useUI } from '../../composables/useUI'
6161
import { useFormGroup } from '../../composables/useFormGroup'
62-
import { mergeConfig, get } from '../../utils'
62+
import { get, mergeConfig, twMerge } from '../../utils'
6363
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
6464
import type { SelectSize, SelectColor, SelectVariant, Strategy, DeepPartial } from '../../types/index'
6565
// @ts-expect-error

‎src/runtime/components/forms/SelectMenu.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -139,14 +139,14 @@ import {
139139
} from '@headlessui/vue'
140140
import { computedAsync, useDebounceFn } from '@vueuse/core'
141141
import { defu } from 'defu'
142-
import { twMerge, twJoin } from 'tailwind-merge'
142+
import { twJoin } from 'tailwind-merge'
143143
import { isEqual } from 'ohash'
144144
import UIcon from '../elements/Icon.vue'
145145
import UAvatar from '../elements/Avatar.vue'
146146
import { useUI } from '../../composables/useUI'
147147
import { usePopper } from '../../composables/usePopper'
148148
import { useFormGroup } from '../../composables/useFormGroup'
149-
import { get, mergeConfig } from '../../utils'
149+
import { get, mergeConfig, twMerge } from '../../utils'
150150
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
151151
import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
152152
// @ts-expect-error

‎src/runtime/components/forms/Textarea.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
<script lang="ts">
2424
import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from 'vue'
2525
import type { PropType } from 'vue'
26-
import { twMerge, twJoin } from 'tailwind-merge'
26+
import { twJoin } from 'tailwind-merge'
2727
import { defu } from 'defu'
2828
import { useUI } from '../../composables/useUI'
2929
import { useFormGroup } from '../../composables/useFormGroup'
30-
import { mergeConfig, looseToNumber } from '../../utils'
30+
import { looseToNumber, mergeConfig, twMerge } from '../../utils'
3131
import type { TextareaSize, TextareaColor, TextareaVariant, Strategy, DeepPartial } from '../../types/index'
3232
// @ts-expect-error
3333
import appConfig from '#build/app.config'

‎src/runtime/components/forms/Toggle.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@
3333
import { computed, toRef, defineComponent } from 'vue'
3434
import type { PropType } from 'vue'
3535
import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
36-
import { twMerge, twJoin } from 'tailwind-merge'
36+
import { twJoin } from 'tailwind-merge'
3737
import UIcon from '../elements/Icon.vue'
3838
import { useUI } from '../../composables/useUI'
3939
import { useFormGroup } from '../../composables/useFormGroup'
40-
import { mergeConfig } from '../../utils'
40+
import { mergeConfig, twMerge } from '../../utils'
4141
import type { ToggleSize, ToggleColor, Strategy, DeepPartial } from '../../types/index'
4242
// @ts-expect-error
4343
import appConfig from '#build/app.config'

‎src/runtime/components/layout/Card.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
<script lang="ts">
2020
import { computed, toRef, defineComponent } from 'vue'
2121
import type { PropType } from 'vue'
22-
import { twMerge, twJoin } from 'tailwind-merge'
22+
import { twJoin } from 'tailwind-merge'
2323
import { useUI } from '../../composables/useUI'
24-
import { mergeConfig } from '../../utils'
24+
import { mergeConfig, twMerge } from '../../utils'
2525
import type { DeepPartial, Strategy } from '../../types/index'
2626
// @ts-expect-error
2727
import appConfig from '#build/app.config'

‎src/runtime/components/layout/Container.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<script lang="ts">
88
import { computed, toRef, defineComponent } from 'vue'
99
import type { PropType } from 'vue'
10-
import { twMerge, twJoin } from 'tailwind-merge'
10+
import { twJoin } from 'tailwind-merge'
1111
import { useUI } from '../../composables/useUI'
12-
import { mergeConfig } from '../../utils'
12+
import { mergeConfig, twMerge } from '../../utils'
1313
import type { DeepPartial, Strategy } from '../../types/index'
1414
// @ts-expect-error
1515
import appConfig from '#build/app.config'

‎src/runtime/components/layout/Divider.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@
2121
<script lang="ts">
2222
import { toRef, computed, defineComponent } from 'vue'
2323
import type { PropType } from 'vue'
24-
import { twMerge, twJoin } from 'tailwind-merge'
24+
import { twJoin } from 'tailwind-merge'
2525
import UIcon from '../elements/Icon.vue'
2626
import UAvatar from '../elements/Avatar.vue'
2727
import { useUI } from '../../composables/useUI'
28-
import { mergeConfig } from '../../utils'
28+
import { mergeConfig, twMerge } from '../../utils'
2929
import type { Avatar, DeepPartial, DividerSize, Strategy } from '../../types/index'
3030
// @ts-expect-error
3131
import appConfig from '#build/app.config'

‎src/runtime/components/layout/Skeleton.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<script lang="ts">
66
import { computed, toRef, defineComponent } from 'vue'
77
import type { PropType } from 'vue'
8-
import { twMerge, twJoin } from 'tailwind-merge'
8+
import { twJoin } from 'tailwind-merge'
99
import { useUI } from '../../composables/useUI'
10-
import { mergeConfig } from '../../utils'
10+
import { mergeConfig, twMerge } from '../../utils'
1111
import type { DeepPartial, Strategy } from '../../types/index'
1212
// @ts-expect-error
1313
import appConfig from '#build/app.config'

‎src/runtime/components/navigation/Breadcrumb.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@
3636
<script lang="ts">
3737
import { defineComponent, toRef } from 'vue'
3838
import type { PropType } from 'vue'
39-
import { twMerge, twJoin } from 'tailwind-merge'
39+
import { twJoin } from 'tailwind-merge'
4040
import UIcon from '../elements/Icon.vue'
4141
import ULink from '../elements/Link.vue'
4242
import { useUI } from '../../composables/useUI'
43-
import { mergeConfig, getULinkProps } from '../../utils'
43+
import { getULinkProps, mergeConfig, twMerge } from '../../utils'
4444
import type { BreadcrumbLink, DeepPartial, Strategy } from '../../types/index'
4545
// @ts-expect-error
4646
import appConfig from '#build/app.config'

‎src/runtime/components/navigation/HorizontalNavigation.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@
5454
<script lang="ts">
5555
import { toRef, defineComponent, computed } from 'vue'
5656
import type { PropType } from 'vue'
57-
import { twMerge, twJoin } from 'tailwind-merge'
57+
import { twJoin } from 'tailwind-merge'
5858
import UIcon from '../elements/Icon.vue'
5959
import UAvatar from '../elements/Avatar.vue'
6060
import UBadge from '../elements/Badge.vue'
6161
import ULink from '../elements/Link.vue'
6262
import { useUI } from '../../composables/useUI'
63-
import { mergeConfig, getULinkProps } from '../../utils'
63+
import { getULinkProps, mergeConfig, twMerge } from '../../utils'
6464
import type { DeepPartial, HorizontalNavigationLink, Strategy } from '../../types/index'
6565
// @ts-expect-error
6666
import appConfig from '#build/app.config'

‎src/runtime/components/navigation/VerticalNavigation.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,14 @@
5555
<script lang="ts">
5656
import { toRef, defineComponent, computed } from 'vue'
5757
import type { PropType } from 'vue'
58-
import { twMerge, twJoin } from 'tailwind-merge'
58+
import { twJoin } from 'tailwind-merge'
5959
import UIcon from '../elements/Icon.vue'
6060
import UAvatar from '../elements/Avatar.vue'
6161
import UBadge from '../elements/Badge.vue'
6262
import ULink from '../elements/Link.vue'
6363
import UDivider from '../layout/Divider.vue'
6464
import { useUI } from '../../composables/useUI'
65-
import { mergeConfig, getULinkProps } from '../../utils'
65+
import { getULinkProps, mergeConfig, twMerge } from '../../utils'
6666
import type { VerticalNavigationLink, Strategy, DeepPartial } from '../../types/index'
6767
// @ts-expect-error
6868
import appConfig from '#build/app.config'

‎src/runtime/components/overlays/ContextMenu.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ import type { PropType, Ref } from 'vue'
1818
import { defu } from 'defu'
1919
import { onClickOutside } from '@vueuse/core'
2020
import type { VirtualElement } from '@popperjs/core'
21-
import { twMerge, twJoin } from 'tailwind-merge'
21+
import { twJoin } from 'tailwind-merge'
2222
import { useUI } from '../../composables/useUI'
2323
import { usePopper } from '../../composables/usePopper'
24-
import { mergeConfig } from '../../utils'
24+
import { mergeConfig, twMerge } from '../../utils'
2525
import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
2626
// @ts-expect-error
2727
import appConfig from '#build/app.config'

‎src/runtime/components/overlays/Notification.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@
4545
<script lang="ts">
4646
import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
4747
import type { PropType } from 'vue'
48-
import { twMerge, twJoin } from 'tailwind-merge'
48+
import { twJoin } from 'tailwind-merge'
4949
import UIcon from '../elements/Icon.vue'
5050
import UAvatar from '../elements/Avatar.vue'
5151
import UButton from '../elements/Button.vue'
5252
import { useUI } from '../../composables/useUI'
5353
import { useTimer } from '../../composables/useTimer'
54-
import { mergeConfig } from '../../utils'
54+
import { mergeConfig, twMerge } from '../../utils'
5555
import type { Avatar, Button, NotificationColor, NotificationAction, Strategy, DeepPartial } from '../../types/index'
5656
// @ts-expect-error
5757
import appConfig from '#build/app.config'

‎src/runtime/components/overlays/Notifications.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
<script lang="ts">
2323
import { computed, toRef, defineComponent } from 'vue'
2424
import type { PropType } from 'vue'
25-
import { twMerge, twJoin } from 'tailwind-merge'
25+
import { twJoin } from 'tailwind-merge'
2626
import { useUI } from '../../composables/useUI'
2727
import { useToast } from '../../composables/useToast'
28-
import { mergeConfig } from '../../utils'
28+
import { mergeConfig, twMerge } from '../../utils'
2929
import type { DeepPartial, Notification, Strategy } from '../../types/index'
3030
import UNotification from './Notification.vue'
3131
import { useState } from '#imports'

‎src/runtime/utils/index.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { defu, createDefu } from 'defu'
22
import { extendTailwindMerge } from 'tailwind-merge'
33
import type { Strategy } from '../types/index'
4+
// @ts-ignore
5+
import appConfig from '#build/app.config'
46

5-
const customTwMerge = extendTailwindMerge<string, string>({
7+
export const twMerge = extendTailwindMerge<string, string>(defu({
68
extend: {
79
classGroups: {
810
icons: [(classPart: string) => classPart.startsWith('i-')]
911
}
1012
}
11-
})
13+
}, appConfig.ui?.tailwindMerge))
1214

1315
const defuTwMerge = createDefu((obj, key, value, namespace) => {
1416
if (namespace === 'default' || namespace.startsWith('default.')) {
@@ -28,7 +30,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
2830
}
2931
if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
3032
// @ts-ignore
31-
obj[key] = customTwMerge(obj[key], value)
33+
obj[key] = twMerge(obj[key], value)
3234
return true
3335
}
3436
})

0 commit comments

Comments
 (0)
Please sign in to comment.