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,7 +8,7 @@
           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"
@@ -16,8 +16,9 @@
           :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