arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Carousel): implement component (#2288)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-08 17:12:43 +02:00
committed by GitHub
parent 69a6e11c52
commit 68ee3f11ca
43 changed files with 1553 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/content/1.getting-started/3.theme.md
View File

@@ -36,7 +36,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
</style>
```
The `@theme` directive tells Tailwind to make new utilities and variants available based on those variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
::note
You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration).
@@ -383,7 +383,7 @@ export default {
::
::note
::warning
Components without slots don't have a [`ui` prop](#ui-prop), only the [`class` prop](#class-prop) is available to override styles.
::
@@ -434,11 +434,11 @@ The `defaultVariants` property specifies the default values for each variant. It
You have multiple ways to customize the appearance of Nuxt UI components, you can do it for all components at once or on a per-component basis.
::tip
::note
Tailwind Variants uses [tailwind-merge](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
::
::note
::tip
You can explore the theme for each component in two ways:
- Check the `Theme` section in the documentation of each individual component.
@@ -463,7 +463,9 @@ export default defineAppConfig({
})
```
::note
In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
::
### `ui` prop
@@ -492,7 +494,9 @@ slots:
---
::
::note
In this example, the `trailingIcon` slot is overwritten with `size-3` even though the `md` size variant would apply a `size-5` class to it.
::
### `class` prop
@@ -506,3 +510,7 @@ slots:
default: Button
---
::
::note
In this example, the `font-bold` class will override the default `font-medium` class on this button.
::