설계 시스템
TAILWIND CSS (Xph000xTailwind CSS) (영어)
Tailwind CSS는 CSS 우선 설정을 사용하여 CSS에서 [@theme](https://tailwindcss.com/docs/functions-and-directives#theme-directivexph05x 지시어로 디자인 토큰을 정의 할 수 있습니다.이 테마는 이식 가능하고 유지 가능하며 사용자 정의하기 쉽습니다.
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
/* Your custom design tokens go here */
}
cursor: pointer 대신 cursor: default를 사용하도록 했습니다. 포인터 커서를 전역적으로 복원하려면 CSS에 다음 기본 스타일을 추가하십시오.@layer base {
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}
글꼴
--font-* 테마 변수를 사용하여 프로젝트에서 utilities 글꼴 패밀리를 사용자화합니다.
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Public Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
Color 이미지
--color-* 테마 변수를 사용하여 colors 또는 override 기본 colors를 사용자 정의할 수 있습니다.
@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-* 테마 변수를 사용하여 breakpoints](https://tailwindcss.com/docs/responsive-design#customizing-your-theme)를 사용자 정의합니다.
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--breakpoint-3xl: 1920px;
--breakpoint-4xl: 2560px;
--breakpoint-5xl: 3840px;
}
Motion (### Motion)
--ease-* 테마 변수를 사용하여 프로젝트의 애니메이션 및 이동 전환에 대한 easing](https://tailwindcss.com/docs/transition-timing-function#customizing-your-theme)를 사용자 정의합니다.
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
--ease-out에서 실행되는 애니메이션 입력 및 종료는 --ease-in-out에서 애니메이션을 확정되지 않은 로드하므로 이 두 개의 라이브러리를 재정의합니다.
prefers-reduced-motion를 설정하면 오버레이가 배율 조정 또는 슬라이딩 및 이동 전환 대신 제자리에서 페이드됩니다.color 시스템
Nuxt UI의 색상 시스템은 특정 색상 값이 아닌 semantic naming를 중심으로 설계되었습니다.이 접근 방식은 UI를보다 유지 관리 가능하게하고 테마 전환을 쉽게 만듭니다.
의미론적 색
Nuxt UI는 색상의 pure를 설명하는 의미 론적 색상 별칭을 제공합니다. 각 별칭은 @theme 구성의 색상을 기반으로 정의되며, 기본 Tailwind CSS palette 이외에 정의된 모든 색상일 수 있습니다.
| 색상 (color) | 기본 값 | 설명 (Description) |
|---|---|---|
primary | green 공식 | 주요 CTA, 활성 탐색, 브랜드 요소, 중요 링크 |
secondary | blue 공식 | 보조 단추, 대체 작업, 보완 UI 요소 |
success | green | 성공 메시지, 완료 상태, 긍정적인 확인 |
info (info) | blue | 정보 경고, 툴팁, 도움말 텍스트, 중립 알림 |
warning | yellow | 경고 메시지, 보류 상태, 주의가 필요한 항목 |
error 공식 | red 공식 | 오류 메시지, 유효성 검사 오류, 파괴 작업 |
neutral | slate | 텍스트, 테두리, 배경, 비활성화 상태 |
이러한 의미 색상은 Nuxt UI 컴포넌트의 color prop에서 사용할 수 있습니다.
<template>
<UButton color="primary">Save Changes</UButton>
</template>Runtime 설정
ui.colors 키 아래의 app.config.ts 파일에서 런타임 시 이러한 색상을 구성할 수 있으므로 서버를 다시 시작하지 않고도 동적 테마 사용자 정의를 수행할 수 있습니다.
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
neutral: 'zinc'
}
}
})
ui.colors 키 아래의 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'
}
}
})
]
})
- Tailwind의 기본 colors](https://tailwindcss.com/docs/colors) 사용 (
blue,green,zinc와 같은) - xx
@theme지시문을 사용하여 사용자 정의 색상을 정의합니다 (위의 예제에서brand와 같습니다).
Extend 색상
tertiary 색상을 추가하는 것과 같이 기본값 이외의 추가 의미 색상을 정의할 수 있습니다.You may want to define extra semantic colors beyond the default, such as adding a tertiary color:
먼저, ui.theme.colors 키 아래에 nuxt.config.ts의 새 색상을 등록합니다.
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 prop 또는 as class를 지원하는 컴포넌트에 이 새로운 색상을 사용합니다.
<UButton color="tertiary">
Special Action
</UButton>