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);
}
你不能在你的 配置 中使用 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: var(--color-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: var(--color-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: var(--color-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>

这些实用工具类是基于全局 --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: 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);
}

正文

Nuxt UI 在你应用程序的 <body> 元素上应用了默认类，以实现跨浅色和深色模式的一致主题。

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

设计系统

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

组件

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