O Tailwind CSS usa uma configuração CSS-first, permitindo que você defina seus design tokens com a diretiva @theme diretamente no seu CSS. Isso torna seu tema portátil, de fácil manutenção e fácil de personalizar.
@import "tailwindcss";
@import "@nitro/ui";
@theme {
/* Your custom design tokens go here */
}
cursor: default em vez de cursor: pointer, para corresponder aos padrões do navegador. Se você quiser restaurar o cursor de ponteiro globalmente, adicione estes estilos base ao seu CSS:@layer base {
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}
Use as variáveis de tema --font-* para personalizar as utilidades de família de fontes no seu projeto.
@import "tailwindcss";
@import "@nitro/ui";
@theme {
--font-sans: 'Public Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
Use as variáveis de tema --color-* para personalizar suas cores ou sobrescrever as cores padrão.
@import "tailwindcss";
@import "@nitro/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 a 950 para cada cor.Use as variáveis de tema --breakpoint-* para personalizar seus breakpoints.
@import "tailwindcss";
@import "@nitro/ui";
@theme {
--breakpoint-3xl: 1920px;
--breakpoint-4xl: 2560px;
--breakpoint-5xl: 3840px;
}
O sistema de cores do Nitro UI é baseado em nomes semânticos em vez de valores de cor específicos. Essa abordagem torna sua UI mais fácil de manter e permite trocar de tema facilmente.
O Nitro UI fornece aliases de cor semânticos que descrevem o propósito da cor. Cada alias é definido com base em uma cor da sua configuração @theme, que pode ser qualquer cor que você definir, além da paleta padrão do Tailwind CSS.
| Color | Default | Description |
|---|---|---|
primary | green | Main CTAs, active navigation, brand elements, important links |
secondary | blue | Secondary buttons, alternative actions, complementary UI elements |
success | green | Success messages, completed states, positive confirmations |
info | blue | Info alerts, tooltips, help text, neutral notifications |
warning | yellow | Warning messages, pending states, attention-needed items |
error | red | Error messages, validation errors, destructive actions |
neutral | slate | Text, borders, backgrounds, disabled states |
Essas cores semânticas estão disponíveis na prop color dos componentes do Nitro UI:
<template>
<NButton color="primary">Save Changes</NButton>
</template>
Você pode configurar essas cores em tempo de execução no seu arquivo app.config.ts, na chave ui.colors, permitindo a personalização dinâmica do tema sem reiniciar o servidor:
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
neutral: 'zinc'
}
}
})
Você pode configurar essas cores em tempo de execução no seu arquivo vite.config.ts, na chave ui.colors, permitindo a personalização dinâmica do tema:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
neutral: 'zinc'
}
}
})
]
})
blue, green, zinc)@theme directive (like brand in our example above)Você pode querer definir cores semânticas adicionais além das padrão, como adicionar uma cor tertiary:
Primeiro, registre a nova cor no seu nuxt.config.ts, na chave ui.theme.colors:
export default defineNuxtConfig({
ui: {
theme: {
colors: [
'primary',
'secondary',
'tertiary',
'info',
'success',
'warning',
'error'
]
}
}
})
Depois, atribua-a no seu app.config.ts, na chave ui.colors:
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
tertiary: 'indigo'
}
}
})
Registre e atribua a nova cor no seu arquivo vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
})
]
})
Por fim, use essa nova cor em componentes que suportam a prop color ou como uma classe:
<NButton color="tertiary">
Special Action
</NButton>