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

docs(getting-started): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-17 16:36:14 +02:00
parent 1f5372baba
commit df72003516
7 changed files with 237 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,12 +33,12 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
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.
This is exactly what the [`@nuxt/ui`](https://github.com/nuxt/ui/blob/v3/src/runtime/index.css) import is all about, it declares the `primary`, `error` and `gray` colors to be configurable through the [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) but we'll talk more about that in the [Colors](/getting-started/colors) section.
::note
You can learn more about this on https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration.
You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration).
::
This is exactly what the [`@import "@nuxt/ui";`](https://github.com/nuxt/ui/blob/v3/src/runtime/index.css) is all about, it extends the default Tailwind CSS theme and declares the `primary`, `error` and `gray` colors to be configurable through the [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) but we'll talk more about that in the [Colors](/getting-started/colors) section.
## Tailwind Variants API
Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/) API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API:
@@ -213,7 +213,7 @@ In this example, the `leadingIcon` slot is overwritten even though the `md` size
### `class` prop
The `class` prop allows you to override the classes of the `root` slot or the `base` slot when the component has no slots.
The `class` prop allows you to override the classes of the `root` or `base` slot. This has priority over the `app.config.ts` configuration and `variants` resolution.
::component-code{slug="button"}
---