Variables CSS

Nuxt UI utilise des variables CSS comme jetons de conception pour une thématisation flexible et cohérente avec un support intégré des modes clair et sombre.

@@pH000@couleurs

Nuxt UI fournit des classes utilitaires CSS Tailwind pour chaque sémantique color que vous définissez, de sorte que vous pouvez utiliser des noms de classe comme text-error ou bg-success:

réf. nécessaireRésuméRésultatInfosAvertissementErreur

<template>
  <span class="text-primary">Primary</span>
  <span class="text-secondary">Secondary</span>
  <span class="text-success">Success</span>
  <span class="text-info">Info</span>
  <span class="text-warning">Warning</span>
  <span class="text-error">Error</span>
</template>

Chaque classe d'utilitaire utilise une variable CSS pour définir sa couleur pour les modes clair et sombre:

:root {
  --ui-primary: var(--ui-color-primary-500);
  --ui-secondary: var(--ui-color-secondary-500);
  --ui-success: var(--ui-color-success-500);
  --ui-info: var(--ui-color-info-500);
  --ui-warning: var(--ui-color-warning-500);
  --ui-error: var(--ui-color-error-500);
}
Vous pouvez ajuster la teinte que chaque classe d'utilitaire utilise pour le mode clair et sombre dans votre fichier main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: var(--ui-color-primary-700);
}

.dark {
  --ui-primary: var(--ui-color-primary-200);
}
Vous ne pouvez pas utiliser primary: 'black' dans votre car black n'a pas plusieurs nuances.
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: black;
}

.dark {
  --ui-primary: white;
}

@@ph077@texte

Nuxt UI fournit des classes utilitaires CSS Tailwind pour les couleurs du texte, vous pouvez donc utiliser des noms de classe comme text-dimmed ou text-muted:

modifier le codeRésolumodifierTexteSoulignéRésolu

<template>
  <span class="text-dimmed">Dimmed</span>
  <span class="text-muted">Muted</span>
  <span class="text-toned">Toned</span>
  <span class="text-default">Text</span>
  <span class="text-highlighted">Highlighted</span>
  <span class="text-inverted bg-inverted">Inverted</span>
</template>

Each utility class uses a CSS variable to set its colour for light and dark modes:

:root {
  --ui-text-dimmed: var(--ui-color-neutral-400);
  --ui-text-muted: var(--ui-color-neutral-500);
  --ui-text-toned: var(--ui-color-neutral-600);
  --ui-text: var(--ui-color-neutral-700);
  --ui-text-highlighted: var(--ui-color-neutral-900);
  --ui-text-inverted: white;
}
Vous pouvez personnaliser ces variables CSS dans votre fichier main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-text: white;
}
Pour modifier plusieurs de ces variables à la fois,attribuez plutôt une couleur différente à neutral dans votre configuration.

Résumé

Nuxt UI fournit des classes utilitaires CSS Tailwind pour les couleurs d'arrière-plan, vous pouvez donc utiliser des noms de classe comme bg-default ou bg-muted:

DéfautRésoluÉlevéAccentuéRésumé

<template>
  <div class="bg-default">Default</div>
  <div class="bg-muted">Muted</div>
  <div class="bg-elevated">Elevated</div>
  <div class="bg-accented">Accented</div>
  <div class="bg-inverted text-inverted">Inverted</div>
</template>

Chaque classe d'utilitaire utilise une variable CSS pour définir sa couleur pour les modes clair et sombre:

:root {
  --ui-bg: white;
  --ui-bg-muted: var(--ui-color-neutral-50);
  --ui-bg-elevated: var(--ui-color-neutral-100);
  --ui-bg-accented: var(--ui-color-neutral-200);
  --ui-bg-inverted: var(--ui-color-neutral-900);
}
Vous pouvez personnaliser ces variables CSS dans votre fichier main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
}

.dark {
  --ui-bg: var(--ui-color-neutral-950);
}

Border (en anglais)

Nuxt UI fournit des classes utilitaires CSS Tailwind pour les couleurs des bordures, vous pouvez donc utiliser des noms de classe comme border-default ou border-muted:

DéfautRésoluAccentuéRésolu

<template>
  <div class="border border-default">Default</div>
  <div class="border border-muted">Muted</div>
  <div class="border border-accented">Accented</div>
  <div class="border border-inverted">Inverted</div>
</template>

Each utility class uses a CSS variable to set its colour for light and dark modes:

:root {
  --ui-border: var(--ui-color-neutral-200);
  --ui-border-muted: var(--ui-color-neutral-200);
  --ui-border-accented: var(--ui-color-neutral-300);
  --ui-border-inverted: var(--ui-color-neutral-900);
}
Vous pouvez personnaliser ces variables CSS dans votre fichier main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-border: var(--ui-color-neutral-100);
}

.dark {
  --ui-border: var(--ui-color-neutral-900);
}

Focus: badge{label="4.9+" class="align-text-top"}

Nuxt UI applique un schéma focus-visible sur chaque élément interactif, teinté avec le prop color du composant, par exemple outline-primary/25 lorsque color="primary" ou outline-inverted/25 lorsque color="neutral".

Si vous préférez une seule couleur de contour pour l'ensemble de votre application, quelle que soit la couleur du composant, vous pouvez ajouter une règle globale dans votre fichier main.css:

@import "tailwindcss";
@import "@nuxt/ui";

*,
::before,
::after {
  @apply outline-primary/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --tw-ring-color: var(--ui-primary);
}

La première règle teinte le contour du focus de chaque composant, la seconde aligne la recoloration de l'anneau appliquée au focus par des variantes avec une bordure visible comme outline ou subtle, y compris des cartes qui mettent en évidence lorsque leur lien est mis au focus.

Assurez-vous de déclarer ces règles en dehors de tout @layer afin qu 'elles aient préséance sur les couleurs définies par les thèmes des composants. Gardez à l'esprit que la première règle teinte également le contour de focus natif de vos propres éléments, et des variantes recolorant un border sur le focus comme FileUpload ou ContentSurroundContinuez à suivre le composant color.

@@ph278@radius

Nuxt UI remplace les utilitaires rounded-* par défaut de Tailwind CSS avec un système de rayon de bordure unifié, de sorte que vous pouvez utiliser des utilitaires de rayon de bordure réguliers ](https://tailwindcss.com/docs/border-radius) comme rounded-xs ou rounded-2xl:

xs@@@ 286 @ sm@@@ 287 @ md@@@ 288 @ lg@@@ 289 @ xl@@@ 290 @ 2xl@@@ 291 @ 3xl@@@ 292 @

<template>
  <div class="rounded-xs">xs</div>
  <div class="rounded-sm">sm</div>
  <div class="rounded-md">md</div>
  <div class="rounded-lg">lg</div>
  <div class="rounded-xl">xl</div>
  <div class="rounded-2xl">2xl</div>
  <div class="rounded-3xl">3xl</div>
</template>

Ces classes d'utilité sont calculées sur la base d'une variable CSS globale --ui-radius, qui définit la valeur du rayon de base appliquée à tous les composants pour un aspect cohérent.

:root {
  --ui-radius: 0.25rem;
}

Chaque utilitaire multiplie cette valeur de base:

@theme {
  --radius-xs: calc(var(--ui-radius) * 0.5);
  --radius-sm: var(--ui-radius);
  --radius-md: calc(var(--ui-radius) * 1.5);
  --radius-lg: calc(var(--ui-radius) * 2);
  --radius-xl: calc(var(--ui-radius) * 3);
  --radius-2xl: calc(var(--ui-radius) * 4);
  --radius-3xl: calc(var(--ui-radius) * 6);
}
Vous pouvez personnaliser la valeur du rayon de base dans votre fichier main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.5rem;
}
La modification de --ui-radius affecte également les classes rounded-xs à rounded-3xl sur votre propre balisage et sur des composants tiers, et pas seulement sur les composants de l'interface utilisateur Nuxt.
Essayez le menu thème: prose-icon {name="i-lucide-palette" class="text-primary"} dans l'en-tête ci-dessus pour modifier la valeur du rayon de base.

Conteneur

Nuxt UI fournit une variable CSS --ui-container qui contrôle la largeur maximale du composant Container.

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}
Vous pouvez personnaliser cette valeur dans votre fichier main.css pour ajuster les largeurs de conteneur de manière cohérente tout au long de votre application:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --container-8xl: 90rem;
}

:root {
  --ui-container: var(--container-8xl);
}

@@ph358@header

Nuxt UI fournit une variable CSS --ui-header-height qui contrôle la hauteur du composant Header.

:root {
  --ui-header-height: 4rem;
}
Vous pouvez personnaliser cette valeur dans votre main.css pour ajuster la hauteur de l'en-tête de manière cohérente tout au long de votre application:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-header-height: --spacing(24);
}

@@ph378@corps

Nuxt UI applique des classes par défaut à l'élément <body> de votre application pour une thématisation cohérente entre les modes clair et sombre:

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

Design System

Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.

Components

Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.