Tailwind CSS 采用 CSS 优先的配置方式，让您可以使用@theme指令直接在 CSS 中定义设计令牌。这使得您的主题可移植、易于维护和定制。
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
/* Your custom design tokens go here */
}
使用 --font-* 主题变量来自定义您的项目中的字体系列工具。
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Public Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
使用 --color-* 主题变量来自定义您的颜色或覆盖默认颜色.
@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-* 主题变量来自定义您的断点.
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--breakpoint-3xl: 1920px;
--breakpoint-4xl: 2560px;
--breakpoint-5xl: 3840px;
}
Nuxt UI 的颜色系统围绕语义命名而不是特定的颜色值进行设计。这种方法使您的 UI 更易于维护，并允许轻松切换主题。
Nuxt UI 提供语义颜色别名，描述颜色的目的。每个别名都基于您的 @theme 配置中的颜色定义，除了默认的 Tailwind CSS 调色板.
| 颜色 | 默认值 | 描述 |
|---|---|---|
primary | 绿色 | 主要 CTA、活动导航、品牌元素、重要链接 |
辅助 | 蓝色 | 辅助按钮、备选操作、补充 UI 元素 |
成功 | 绿色 | 成功消息、完成状态、积极确认 |
信息 | 蓝色 | 信息提示、工具提示、帮助文本、中性通知 |
警告 | 黄色 | 警告消息、待处理状态、需要注意的项 |
error | 红色 | 错误消息、验证错误、破坏性操作 |
neutral | 石板色 | 文本、边框、背景、禁用状态 |
这些语义颜色在 Nuxt UI 组件的 color 属性中可用
<template>
<UButton color="primary">Save Changes</UButton>
</template>
您可以在app.config.ts文件中的 ui.colors 键下，在运行时配置这些颜色，从而实现动态主题定制，无需重新启动服务器
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
neutral: 'zinc'
}
}
})
您可以在 vite.config.ts 文件中的 ui.colors 键下，在运行时配置这些颜色，从而实现动态主题定制
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 键下注册新颜色
export default defineNuxtConfig({
ui: {
theme: {
colors: [
'primary',
'secondary',
'tertiary',
'info',
'success',
'warning',
'error'
]
}
}
})
然后，在您的 app.config.ts 中，在 ui.colors 键下分配它
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
tertiary: 'indigo'
}
}
})
在您的 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 属性的组件中或作为类使用此新颜色
<UButton color="tertiary">
Special Action
</UButton>