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

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