设计系统

Nuxt UI的设计系统使用Tailwind CSS进行简单的主题化和轻松的自定义。

Tailwind CSS

Tailwind CSS使用CSS优先配置，允许您直接在CSS中使用@theme指令定义您的设计令牌。这使得您的主题可移植，可维护且易于自定义。

app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  /* Your custom design tokens go here */
}
查看Tailwind CSS文档以获取所有可用的主题变量自定义选项。
Tailwind CSS v4更改了Preflight，以便按钮使用cursor: default而不是cursor: pointer来匹配浏览器默认值。如果您希望全局恢复指针光标，请将这些基本样式添加到CSS中：
app/assets/css/main.css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Fonts

使用--font-*主题变量自定义项目中的字体系列实用程序。

app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
这里定义的字体由@nuxt/fonts模块自动加载和优化。

Colors

使用--color-*主题变量自定义颜色或覆盖默认颜色。

app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  /* Override default green color */
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;

  /* Define new custom color */
  --color-brand-50: #fef2f2;
  --color-brand-100: #fee2e2;
  --color-brand-200: #fecaca;
  --color-brand-300: #fca5a5;
  --color-brand-400: #f87171;
  --color-brand-500: #ef4444;
  --color-brand-600: #dc2626;
  --color-brand-700: #b91c1c;
  --color-brand-800: #991b1b;
  --color-brand-900: #7f1d1d;
  --color-brand-950: #450a0a;
}
添加自定义颜色时，请确保为每种颜色定义从50到950的所有阴影。

断点

使用--breakpoint-*主题变量自定义断点。

app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;
}

Motion

使用--ease-*主题变量自定义项目中动画和移动过渡的易用性。

app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

进入和退出动画在--ease-out上运行，不确定的加载动画在--ease-in-out上运行，因此覆盖这两个重定时库。

当prefers-reduced-motion被设置时，覆盖在适当的位置淡入，而不是缩放或滑动，并且移动过渡被禁用。

颜色系统

Nuxt UI的颜色系统是围绕语义命名而不是特定的颜色值来设计的。这种方法使您的UI更具维护性，并使主题切换变得轻松。

语义颜色

Nuxt UI提供了语义颜色别名，用于描述颜色的和e。每个别名都是基于@theme配置中的颜色定义的，除了默认Tailwind CSS palette之外，@theme可以是您定义的任何颜色。

颜色默认描述
primarygreen主要CTA、主动导航、品牌元素、重要链接
secondaryblue辅助按钮、替代操作、补充UI元素
successgreen成功消息、已完成状态、积极确认
infoblue信息提醒、工具提示、帮助文本、中性通知
warningyellow警告消息、挂起状态、需要注意的事项
errorred错误消息、验证错误、破坏性操作
neutralslate文本、边框、背景、禁用状态

这些语义颜色在Nuxt UI组件的color道具中可用：

<template>
  <UButton color="primary">Save Changes</UButton>
</template>
尝试标题中的：prose-icon{name="i-lucide-palette" class="text-primary"}主题菜单，立即查看不同的配色方案如何影响整个UI，或者打开主题编辑器一次性自定义所有内容！

ph 4配置

您可以在运行时在ui.colors键下的app.config.ts文件中配置这些颜色，允许动态主题自定义而无需重新启动服务器：

app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      neutral: 'zinc'
    }
  }
})

您可以在运行时在ui.colors键下的vite.config.ts文件中配置这些颜色，允许动态主题自定义：

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'blue',
          secondary: 'purple',
          neutral: 'zinc'
        }
      }
    })
  ]
})
您只能使用主题中存在的颜色。
  • 使用顺风的默认颜色（如blue，green，zinc）
  • 首先使用@theme指令定义自定义颜色（就像上面例子中的brand）

扩展颜色

您可能希望在默认值之外定义额外的语义颜色，例如添加tertiary颜色：

首先，在nuxt.config.ts中的ui.theme.colors键下注册新颜色：

nuxt.config.ts
export default defineNuxtConfig({
  ui: {
    theme: {
      colors: [
        'primary',
        'secondary',
        'tertiary',
        'info',
        'success',
        'warning',
        'error'
      ]
    }
  }
})

然后，在app.config.ts中的ui.colors键下分配它：

app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      tertiary: 'indigo'
    }
  }
})

在vite.config.ts文件中注册并分配新颜色：

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      theme: {
        colors: [
          'primary',
          'secondary',
          'tertiary',
          'info',
          'success',
          'warning',
          'error'
        ]
      },
      ui: {
        colors: {
          primary: 'blue',
          secondary: 'purple',
          tertiary: 'indigo'
        }
      }
    })
  ]
})

最后，在支持color prop或作为class的组件中使用这个新颜色：

<UButton color="tertiary">
  Special Action
</UButton>

Contribution

A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.

CSS Variables

Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.