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

@@ -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.