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

chore(deps): update tailwindcss to v4.0.0-alpha.33 (v3) (#2493)

Browse Source 
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
renovate[bot]
2024-11-12 13:56:31 +01:00
committed by GitHub
parent fc9711223b
commit fa5a3752c9
42 changed files with 979 additions and 811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -357,6 +357,33 @@ You can customize the default radius value using the default Tailwind CSS variab
```
::
#### Container
Nuxt UI uses a global `--ui-container` CSS variable to define the width of the container:
```css
:root {
--ui-container: var(--container-7xl);
}
```
::tip
You can customize the default container width using the default Tailwind CSS variables or a value of your choice:
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--container-8xl: 90rem;
}
:root {
--ui-container: var(--container-8xl);
}
```
::
## Components theme
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:
@@ -370,7 +397,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
```ts [src/theme/card.ts]
export default {
slots: {
root: 'bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow',
root: 'bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
@@ -404,7 +431,7 @@ Some components don't have slots, they are just composed of a single root elemen
```ts [src/theme/container.ts]
export default {
base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'
}
```