CSS 变量

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

颜色

Nuxt UI 为您定义的每个语义颜色提供 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);
}
您可以在 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 的类名

暗淡柔和色调文本高亮反转

<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 的类名

默认柔和凸起强调反转

<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 的类名

默认柔和强调反转

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

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 组件，以实现高级、灵活且可维护的样式。