CSS 变量

Nuxt UI 使用 CSS 变量作为设计令牌（Design Tokens），以实现灵活、一致的主题化，并内置了对浅色和深色模式的支持。

颜色

Nuxt UI 为你定义的每种 语义化颜色 提供 Tailwind CSS 工具类，允许你使用诸如 text-error 或 bg-success 的类名。

Primary (主要)Secondary (次要)Success (成功)Info (信息)Warning (警告)Error (错误)

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

文本

Nuxt UI 为文本颜色提供了 Tailwind CSS 工具类，允许你使用诸如 text-dimmed 或 text-muted 的类名。

Dimmed (暗淡)Muted (柔和)Toned (调色)Text (默认文本)Highlighted (高亮)Inverted (反转)

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

背景 (Background)

Nuxt UI 为背景颜色提供了 Tailwind CSS 工具类，允许你使用诸如 bg-default 或 bg-muted 的类名。

Default (默认)Muted (柔和)Elevated (悬浮)Accented (强调)Inverted (反转)

<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);
}
你可以在 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 的类名。

Default (默认)Muted (柔和)Accented (强调)Inverted (反转)

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

圆角 (Radius)

Nuxt UI 用统一的圆角系统覆盖了 Tailwind CSS 默认的 rounded-* 工具类，允许你使用常规的 圆角工具类，例如 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-radius CSS 变量计算得出的，该变量定义了应用于所有组件的基础圆角值，以确保视觉风格的一致性。

:root {
  --ui-radius: 0.25rem;
}
你可以在 main.css 文件中自定义基础圆角值。
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.5rem;
}
尝试使用上方标题栏中的 主题选择器来更改基础圆角值。

Container

Nuxt UI 提供了一个 --ui-container CSS 变量，用于控制 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);
}

页眉

Nuxt UI 提供了一个 --ui-header-height CSS 变量，用于控制 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 的设计系统使用 Tailwind CSS 实现简单的主题化和轻松的自定义。

组件 (Components)

了解如何使用 Tailwind Variants API 自定义 Nuxt UI 组件，以获得更高级、灵活且易于维护的样式。