Variables de CSS

La interfaz de usuario de Nuxt utiliza variables CSS como tokens de diseño para una temática flexible y consistente con soporte integrado de modo claro y oscuro.

@@pH000@colores

Nuxt UI proporciona clases de utilidad CSS de Tailwind para cada color semántico que defina, por lo que puede usar nombres de clase comotext-errorobg-success:

ArchivoArchivoRespuestaInformación@ Advertencia@@ Error

Cada clase de utilidad utiliza una variable CSS para establecer su color para los modos claro y oscuro:

: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);
}
Puede ajustar el tono que usa cada clase de utilidad para el modo claro y oscuro en su archivo 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);
}
No puede usar primary: 'black' en su porque black no tiene múltiples tonos. Para usar blanco o negro sólido como color primario, configurarlo directamente en su archivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

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

@777@@Proyecto

Nuxt UI proporciona clases de utilidad CSS de Tailwind para colores de texto, por lo que puede usar nombres de clase como text-dimmed o text-muted:

OmitidoSilenciadoTonadoTraducciónResaltadoInvertido

Cada clase de utilidad utiliza una variable CSS para establecer su color para los modos claro y oscuro:

: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;
}
Puede personalizar estas variables CSS en su archivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

.dark {
  --ui-text: white;
}
Para cambiar varias de estas variables a la vez,asigne un color diferente a neutral en su configuración.

@@pH134@Proyecto

Nuxt UI proporciona clases de utilidad CSS Tailwind para los colores de fondo, por lo que puede usar nombres de clase como bg-default o bg-muted:

por defectoSilenciadoAlzadoAcentuadoInvertido

Cada clase de utilidad utiliza una variable CSS para establecer su color para los modos claro y oscuro:

: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);
}
Puede personalizar estas variables CSS en su archivo 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 inglés)

Nuxt UI proporciona clases de utilidad CSS Tailwind para los colores de los bordes, por lo que puede usar nombres de clase como border-default o border-muted:

por defectoSilenciadoAcentuadoInvertido

Cada clase de utilidad utiliza una variable CSS para establecer su color para los modos claro y oscuro:

: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);
}
Puede personalizar estas variables CSS en su archivo 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"}

La interfaz de usuario de Nuxt aplica un esquema focus-visible en cada elemento interactivo, teñido con el prop color del componente, por ejemplo,outline-primary/25 cuando color="primary" o outline-inverted/25 cuando color="neutral".

Si prefiere un solo color de contorno en toda su aplicación, independientemente del color del componente, puede agregar una regla global en su archivo 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 primera regla tiñe el contorno de enfoque de cada componente, la segunda alinea el anillo de recolor aplicado en el enfoque por variantes con un borde visible como outline o subtle, incluyendo tarjetas que resaltan cuando su enlace está enfocado.

Asegúrese de declarar estas reglas fuera de cualquier @layer para que tengan prioridad sobre los colores establecidos por los temas de los componentes.Tenga en cuenta que la primera regla también tiñe el contorno de enfoque nativo de sus propios elementos, y variantes que recolorean un border en foco como FileUpload o ContentSurroundseguir el componente color.

@278@RT2780

Nuxt UI reemplaza las utilidades rounded-* por defecto de Tailwind CSS con un sistema unificado de radio de borde, por lo que puede usar las utilidades normales border radius como rounded-xs o rounded-2xl:

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

Estas clases de utilidad se calculan en función de una variable CSS global --ui-radius, que define el valor de radio base aplicado a todos los componentes para una apariencia consistente.

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

Cada utilidad multiplica este valor 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);
}
Puede personalizar el valor del radio base en su archivo main.css:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.5rem;
}
Cambiar --ui-radius también afecta a las clases rounded-xs a rounded-3xl en su propio marcado y componentes de terceros, no solo en los componentes de la interfaz de usuario de Nuxt.
Pruebe el menú de tema: prose-icon {name="i-lucide-palette" class="text-primary"} en el encabezado de arriba para cambiar el valor del radio base.

@@334@Contenedor

La interfaz de usuario de Nuxt proporciona una variable CSS --ui-container que controla el ancho máximo del componente Container.

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}
Puede personalizar este valor en su archivo main.css para ajustar los anchos de los contenedores de manera consistente en toda la aplicación:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

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

@358@@Encabezado

La interfaz de usuario de Nuxt proporciona una variable CSS --ui-header-height que controla la altura del componente Header.

:root {
  --ui-header-height: 4rem;
}
Puede personalizar este valor en su main.css para ajustar la altura del encabezado de manera consistente en toda la aplicación:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

@@ph378@cuerpo

Nuxt UI aplica clases predeterminadas en el elemento <body> de su aplicación para una tematización consistente en los modos de luz y oscuridad:

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.