Nuxt UI provides Tailwind CSS utility classes for each semantic color you define, allowing you to use class names like text-error or bg-success:
PrimarySecondarySuccessInfoWarningError
Each utility class uses a CSS variable to set its color for light and dark modes:
: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);
}
.dark {
--ui-primary: var(--ui-color-primary-400);
--ui-secondary: var(--ui-color-secondary-400);
--ui-success: var(--ui-color-success-400);
--ui-info: var(--ui-color-info-400);
--ui-warning: var(--ui-color-warning-400);
--ui-error: var(--ui-color-error-400);
}
You can adjust which shade each utility class uses for light and dark mode in your main.css file:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-primary: var(--ui-color-primary-700);
}
.dark {
--ui-primary: var(--ui-color-primary-200);
}
You can't use primary: 'black' in your config because black doesn't have multiple shades. To use solid black or white as your primary color, set it directly in your main.css file:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-primary: black;
}
.dark {
--ui-primary: white;
}
Nuxt UI provides Tailwind CSS utility classes for text colors, allowing you to use class names like text-dimmed or text-muted:
DimmedMutedTonedTextHighlightedInverted
Each utility class uses a CSS variable to set its color 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;
}
.dark {
--ui-text-dimmed: var(--ui-color-neutral-500);
--ui-text-muted: var(--ui-color-neutral-400);
--ui-text-toned: var(--ui-color-neutral-300);
--ui-text: var(--ui-color-neutral-200);
--ui-text-highlighted: white;
--ui-text-inverted: var(--ui-color-neutral-900);
}
You can customize these CSS variables in your main.css file:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-text: var(--ui-color-neutral-900);
}
.dark {
--ui-text: white;
}
Nuxt UI provides Tailwind CSS utility classes for background colors, allowing you to use class names like bg-default or bg-muted:
DefaultMutedElevatedAccentedInverted
Each utility class uses a CSS variable to set its color for light and dark modes:
: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);
}
.dark {
--ui-bg: var(--ui-color-neutral-900);
--ui-bg-muted: var(--ui-color-neutral-800);
--ui-bg-elevated: var(--ui-color-neutral-800);
--ui-bg-accented: var(--ui-color-neutral-700);
--ui-bg-inverted: white;
}
You can customize these CSS variables in your main.css file:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-bg: var(--ui-color-neutral-50);
}
.dark {
--ui-bg: var(--ui-color-neutral-950);
}
Nuxt UI provides Tailwind CSS utility classes for border colors, allowing you to use class names like border-default or border-muted:
DefaultMutedAccentedInverted
Each utility class uses a CSS variable to set its color 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);
}
.dark {
--ui-border: var(--ui-color-neutral-800);
--ui-border-muted: var(--ui-color-neutral-700);
--ui-border-accented: var(--ui-color-neutral-700);
--ui-border-inverted: white;
}
You can customize these CSS variables in your main.css file:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-border: var(--ui-color-neutral-100);
}
.dark {
--ui-border: var(--ui-color-neutral-900);
}
Nuxt UI overrides Tailwind CSS's default rounded-* utilities with a unified border radius system, allowing you to use regular border radius utilities like rounded-xs or rounded-2xl:
xssmmdlgxl2xl3xl
These utility classes are calculated based on a global --ui-radius CSS variable, which defines the base radius value applied across all components for a consistent look.
:root {
--ui-radius: 0.25rem;
}
You can customize the base radius value in your main.css file:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: 0.5rem;
}
Try the theme picker in the header above to change the base radius value.
Nuxt UI provides a --ui-container CSS variable that controls the maximum width of the Container component.
:root {
--ui-container: 80rem; /* var(--container-7xl) */
}
You can customize this value in your main.css file to adjust container widths consistently throughout your application:
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--container-8xl: 90rem;
}
:root {
--ui-container: var(--container-8xl);
}
Nuxt UI provides a --ui-header-height CSS variable that controls the height of the Header component.
:root {
--ui-header-height: --spacing(16);
}
You can customize this value in your main.css to adjust header height consistently throughout your application:
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-header-height: --spacing(24);
}
Nuxt UI applies default classes on the <body> element of your app for consistent theming across light and dark modes:
body {
@apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}