CSS 变量

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

颜色

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

PrimarySecondarySuccessInfoWarningError

<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);
}
您不能在您的config 中使用 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 的类名。

DimmedMutedTonedTextHighlightedInverted

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

背景

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

DefaultMutedElevatedAccentedInverted

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

边框

Nuxt UI 为边框颜色提供 Tailwind CSS 工具类，允许您使用诸如 border-default 或 border-muted 的类名。

DefaultMutedAccentedInverted

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

圆角

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>

这些工具类是根据全局 CSS 变量 --ui-radius 计算的，该变量定义了应用于所有组件的基础半径值，以实现一致的外观。

: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: --spacing(16);
}
您可以在 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;
}

设计系统

Nuxt UI 的设计系统使用 Tailwind CSS 实现简单的主题和轻松的定制。

组件

了解如何使用 Tailwind Variants API 自定义 Nuxt UI 组件，以实现高级、灵活和可维护的样式。