CSS变量

Nuxt UI使用CSS变量作为设计标记，以实现灵活，一致的主题，并内置明暗模式支持。

Colors

Nuxt UI为您定义的每个semantic color提供Tailwind CSS实用程序类，因此您可以使用类名称，如text-error或bg-success：

初级中学成功详细信息警告错误

#代码

<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>

每个实用程序类都使用一个CSS变量来设置其亮和暗模式的颜色：

: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);
}

您可以在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);
}

不能在****中使用primary: 'black'，因为black没有多个阴影。要使用纯黑色或白色作为主色，请直接在main.css文件中设置：

app/assets/css/main.css

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

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

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

Text

Nuxt UI为文本颜色提供Tailwind CSS实用程序类，因此您可以使用类名，如text-dimmed或text-muted：

调暗静音色调正文高亮显示倒置

#代码

<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>

每个实用程序类都使用一个CSS变量来设置其亮和暗模式的颜色：

: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);
}

您可以在main.css文件中自定义这些CSS变量：

app/assets/css/main.css

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

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

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

要同时更改其中的多个变量，请在配置中为neutral](/docs/getting-started/theme/design-system#runtime-configuration)指定不同的颜色。

Background

Nuxt UI提供Tailwind CSS工具类用于背景颜色，因此您可以使用类名，如bg-default或bg-muted：

默认静音【升高】{class="bg-elevated text-sm px-4 py-1.5 inline-block rounded-md"} 重音倒置

#代码

<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>

每个实用程序类都使用一个CSS变量来设置其亮和暗模式的颜色：

: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;
}

您可以在main.css文件中自定义这些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

Nuxt UI为边框颜色提供Tailwind CSS实用程序类，因此您可以使用类名称，如border-default或border-muted：

默认值静音重音倒置

#代码

<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>

每个实用程序类都使用一个CSS变量来设置其亮和暗模式的颜色：

: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;
}

您可以在main.css文件中自定义这些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在每个交互元素上应用focus-visible轮廓，并使用组件的color道具进行着色，例如color="primary"时为outline-primary/25或color="neutral"时为outline-inverted/25。

如果您希望在整个应用中使用单一轮廓颜色，而不考虑组件颜色，则可以在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);
}

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

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

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

第一个规则为每个组件的焦点轮廓着色，第二个规则通过具有可见边框的变体（如outline或subtle）对齐应用于焦点的环形重新着色，包括在其链接聚焦时突出显示的卡片。

请确保在任何@layer之外声明这些规则，以便它们优先于组件主题设置的颜色。请记住，第一个规则也会为您自己的元素的本地焦点轮廓着色，以及在焦点上包含border的变体，如FileSurround或[ContentSurround](/docs/components/content-surround继续遵循组件color。

Radius

Nuxt UI使用统一的边界半径系统覆盖Tailwind CSS默认的rounded-*实用程序，因此您可以使用常规的border radius实用程序，如rounded-xs或rounded-2xl：

xssmmdlgxl2xl3xl

#代码

<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>

这些实用程序类是基于全局--ui-radiusCSS变量计算的，该变量定义了应用于所有组件的基本半径值，以实现一致的外观。

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

每个实用程序都将此基础值相乘：

@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);
}

您可以在main.css文件中自定义基半径值：

app/assets/css/main.css

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

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

更改--ui-radius还会影响您自己的标记和第三方组件上的rounded-xs到rounded-3xl类，而不仅仅是Nuxt UI组件。

尝试上面标题中的：prose-icon{name="i-lucide-palette" class="text-primary"}主题菜单来更改底部半径值。

Container

Nuxt UI提供了一个--ui-containerCSS变量，用于控制Container组件的最大宽度。

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}

您可以在main.css文件中自定义此值，以便在整个应用程序中一致地调整容器宽度：

app/assets/css/main.css

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

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

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

Header

Nuxt UI提供了一个--ui-header-heightCSS变量，用于控制Header组件的高度。

:root {
  --ui-header-height: 4rem;
}

您可以在main.css中自定义此值，以便在整个应用程序中一致地调整标题高度：

app/assets/css/main.css

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

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

Body

Nuxt UI在您的应用的<body>元素上应用默认类，以便在明暗模式下保持一致的主题：

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.