feat(module)!: use tailwind-merge for class merging (#509)

docs/components/color-picker/ColorPickerPill.vue

@@ -1,11 +1,11 @@
 <template>
   <UTooltip :text="color.value" class="capitalize" :open-delay="500">
     <UButton
-      color="gray"
+      color="transparent"
       square
       :ui="{
         color: {
-          gray: {
+          transparent: {
             solid: 'bg-gray-100 dark:bg-gray-800',
             ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
           }

docs/components/content/ComponentCard.vue

@@ -8,16 +8,17 @@
           v-model="componentProps[prop.name]"
           :name="`prop-${prop.name}`"
           tabindex="-1"
-          :ui="{ wrapper: 'relative flex items-start justify-center' }"
+          class="justify-center"
         />
         <USelectMenu
           v-else-if="prop.type === 'string' && prop.options.length"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"
           variant="none"
-          :ui-menu="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
-          class="!py-0"
+          class="inline-flex"
+          :ui-menu="{ width: 'w-32 !-mt-px', rounded: 'rounded-t-none' }"
+          select-class="py-0"
           tabindex="-1"
           :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
         />
@@ -28,7 +29,7 @@
           :name="`prop-${prop.name}`"
           variant="none"
           autocomplete="off"
-          class="!py-0"
+          input-class="py-0"
           tabindex="-1"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />

docs/components/content/examples/FormGroupErrorExample.vue

@@ -1,6 +1,6 @@
 <template>
   <UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
-    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error && 'i-heroicons-exclamation-triangle-20-solid'" />
+    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
   </UFormGroup>
 </template>
 

docs/components/content/examples/TableExampleAdvanced.vue

@@ -231,7 +231,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
           :total="pageTotal"
           :ui="{
             wrapper: 'flex items-center gap-1',
-            rounded: 'rounded-full min-w-[32px] justify-center',
+            rounded: '!rounded-full min-w-[32px] justify-center',
             default: {
               activeButton: {
                 variant: 'outline'

docs/components/content/themes/PaginationThemeRounded.vue

@@ -9,7 +9,7 @@ const items = ref(Array(55))
     :total="items.length"
     :ui="{
       wrapper: 'flex items-center gap-1',
-      rounded: 'rounded-full min-w-[32px] justify-center'
+      rounded: '!rounded-full min-w-[32px] justify-center'
     }"
     :prev-button="null"
     :next-button="{

docs/components/content/themes/VerticalNavigationThemeTailwind.vue

@@ -25,8 +25,8 @@ const links = [{
     :links="links"
     :ui="{
       wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-s -ms-px lg:leading-6',
-      padding: 'ps-4',
+      base: 'group block border-s -ms-px lg:leading-6 before:hidden',
+      padding: 'p-0 ps-4',
       rounded: '',
       font: '',
       ring: '',

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

@@ -77,6 +77,8 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
 
 ## Components
 
+### `app.config.ts`
+
 Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
 
 ```ts [app.config.ts]
@@ -89,6 +91,8 @@ export default defineAppConfig({
 })
 ```
 
+### `ui` prop
+
 Each component has a `ui` prop that allows you to customize everything specifically.
 
 ```vue
@@ -103,6 +107,45 @@ Each component has a `ui` prop that allows you to customize everything specifica
 You can find the default classes for each component under the `Preset` section.
 ::
 
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything. :u-badge{label="Edge" class="!rounded-full" variant="subtle"}
+
+For example, the default preset of the `FormGroup` component looks like this:
+
+```json
+{
+  ...
+  "label": {
+    "base": "block font-medium text-gray-700 dark:text-gray-200",
+    ...
+  }
+  ...
+}
+```
+
+To change the font of the `label`, you only need to write:
+
+```vue
+<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }">
+  ...
+</UFormGroup>
+```
+
+This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
+
+### `class` attribute
+
+You can also use the `class` attribute to add classes to the component.
+
+```vue
+<template>
+  <UButton label="Button" class="rounded-full" />
+</template>
+```
+
+Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config. :u-badge{label="Edge" class="!rounded-full" variant="subtle"}
+
+### Default values
+
 Some component props like `size`, `color`, `variant`, etc. have a default value that you can override in your `app.config.ts`.
 
 ```ts [app.config.ts]

docs/content/1.getting-started/5.examples.md

@@ -223,8 +223,8 @@ const links = [{
     :links="links"
     :ui="{
       wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-s -ms-px lg:leading-6',
-      padding: 'ps-4',
+      base: 'group block border-s -ms-px lg:leading-6 before:hidden',
+      padding: 'p-0 ps-4',
       rounded: '',
       font: '',
       ring: '',
@@ -254,7 +254,7 @@ const items = ref(Array(55))
     :total="items.length"
     :ui="{
       wrapper: 'flex items-center gap-1',
-      rounded: 'rounded-full min-w-[32px] justify-center'
+      rounded: '!rounded-full min-w-[32px] justify-center'
     }"
     :prev-button="null"
     :next-button="{

docs/content/3.forms/9.form-group.md

@@ -142,8 +142,6 @@ baseProps:
 props:
   label: 'Email'
   error: true
-  ui:
-    error: 'hidden'
 excludedProps:
   - ui
   - error

package.json

@@ -47,20 +47,21 @@
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.4.0",
     "@release-it/conventional-changelog": "^7.0.0",
     "eslint": "^8.47.0",
+    "joi": "^17.9.2",
     "nuxt": "^3.6.5",
     "release-it": "^16.1.4",
     "typescript": "^5.1.6",
     "unbuild": "^1.2.1",
     "vue-tsc": "^1.8.8",
     "yup": "^1.2.0",
-    "joi": "^17.9.2",
     "zod": "^3.21.4"
   }
 }

src/runtime/app.config.ts

@@ -516,7 +516,6 @@ const select = {
 }
 
 const selectMenu = {
-  wrapper: 'relative',
   container: 'z-20',
   width: 'w-full',
   height: 'max-h-60',

src/runtime/components/data/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper">
+  <div :class="wrapperClass" v-bind="attrs">
     <table :class="[ui.base, ui.divide]">
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
@@ -69,8 +69,10 @@
 <script lang="ts">
 import { ref, computed, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
-import { capitalize, orderBy, omit, get } from 'lodash-es'
+import { omit, capitalize, orderBy, get } from 'lodash-es'
 import { defu } from 'defu'
+import { twMerge } from 'tailwind-merge'
+import { defuTwMerge } from '../../utils'
 import type { Button } from '../../types/button'
 import { useAppConfig } from '#imports'
 // TODO: Remove
@@ -84,6 +86,7 @@ function defaultComparator<T> (a: T, z: T): boolean {
 }
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Array,
@@ -135,15 +138,17 @@ export default defineComponent({
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.table>>,
-      default: () => appConfig.ui.table
+      default: () => ({})
     }
   },
   emits: ['update:modelValue'],
   setup (props, { emit, attrs }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
-    const ui = computed<Partial<typeof appConfig.ui.table>>(() => defu({}, props.ui, appConfig.ui.table))
+    const ui = computed<Partial<typeof appConfig.ui.table>>(() => defuTwMerge({}, props.ui, appConfig.ui.table))
+
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
 
     const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map((key) => ({ key, label: capitalize(key), sortable: false })))
 
@@ -235,8 +240,10 @@ export default defineComponent({
     }
 
     return {
+      attrs: omit(attrs, ['class']),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       sort,
       // eslint-disable-next-line vue/no-dupe-keys