arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 03:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Benjamin Canac
2023-08-12 17:17:00 +02:00
parent 6d7973f6e1
commit 8880bdc456
47 changed files with 685 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/content/1.getting-started/3.theming.md
View File

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