CSS 변수

Nuxt UI는 CSS 변수를 디자인 토큰으로 사용하여 기본 제공되는 밝고 어두운 모드 지원을 통해 유연하고 일관된 테마를 지정합니다.Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.

Colors 이미지

Nuxt UI는 정의한 각 semantic color에 대해 Tailwind CSS 유틸리티 클래스를 제공하므로 text-error 또는 bg-success와 같은 클래스 이름을 사용할 수 있습니다.

1차 {class="text-primary text-sm px-4 py-1.5 inline-block"} 일반 {class="text-secondary text-sm px-4 py-1.5 inline-block"} 성공 {class="text-success text-sm px-4 py-1.5 inline-block"} 정보 {class="text-info text-sm px-4 py-1.5 inline-block"} 경고 {class="text-warning text-sm px-4 py-1.5 inline-block"} 오류 {class="text-error text-sm px-4 py-1.5 inline-block"}

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

.dark {
  --ui-primary: var(--ui-color-primary-400);
  --ui-secondary: var(--ui-color-secondary-400);
  --ui-success: var(--ui-color-success-400);
  --ui-info: var(--ui-color-info-400);
  --ui-warning: var(--ui-color-warning-400);
  --ui-error: var(--ui-color-error-400);
}

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

black에는 여러 음영이 없기 때문에 config에는 primary: 'black'를 사용할 수 없습니다. 단색 검정이나 흰색을 기본 색상으로 사용하려면 main.css 파일에서 직접 설정합니다.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: black;
}

.dark {
  --ui-primary: white;
}

Text 파일

Nuxt UI는 텍스트 색상에 대한 Tailwind CSS 유틸리티 클래스를 제공하므로 text-dimmed 또는 text-muted와 같은 클래스 이름을 사용할 수 있습니다.

잡담 {class="text-dimmed text-sm px-4 py-1.5 inline-block rounded-md"} 잡담 {class="text-muted text-sm px-4 py-1.5 inline-block rounded-md"} 잡담잡담 {class="text-toned text-sm px-4 py-1.5 inline-block rounded-md"} 텍스트 {class="text-default text-sm px-4 py-1.5 inline-block rounded-md"} 하이라이트 {class="text-highlighted text-sm px-4 py-1.5 inline-block rounded-md"} 반전 {class="text-inverted bg-inverted text-sm px-4 py-1.5 inline-block rounded-md"}

<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: white;
}

.dark {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: white;
  --ui-text-inverted: var(--ui-color-neutral-900);
}

main.css 파일에서 이러한 CSS 변수를 사용자 정의할 수 있습니다.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-text: white;
}

이러한 변수 중 몇 가지를 한 번에 변경하려면 config에서 neutral에 다른 색상을 할당합니다.

Background 이미지

Nuxt UI는 배경색을 위한 Tailwind CSS 유틸리티 클래스를 제공하므로 bg-default 또는 bg-muted와 같은 클래스 이름을 사용할 수 있습니다.

기본값 {class="bg-default text-sm px-4 py-1.5 inline-block rounded-md"} 잡담 {class="bg-muted text-sm px-4 py-1.5 inline-block rounded-md"} 모델 번호:{class="bg-elevated text-sm px-4 py-1.5 inline-block rounded-md"} 인증 {class="bg-accented text-sm px-4 py-1.5 inline-block rounded-md"} {class="bg-inverted text-inverted text-sm px-4 py-1.5 inline-block rounded-md"} ({class="bg-inverted text-inverted text-sm px-4 py-1.5 inline-block rounded-md"}) 에 해당되는 글 1건

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

.dark {
  --ui-bg: var(--ui-color-neutral-900);
  --ui-bg-muted: var(--ui-color-neutral-800);
  --ui-bg-elevated: var(--ui-color-neutral-800);
  --ui-bg-accented: var(--ui-color-neutral-700);
  --ui-bg-inverted: white;
}

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

border 파일 이름

Nuxt UI는 테두리 색상에 대한 Tailwind CSS 유틸리티 클래스를 제공하므로 border-default 또는 border-muted와 같은 클래스 이름을 사용할 수 있습니다.

기본값 {class="border-2 border-default text-sm px-4 py-1.5 inline-block rounded-md"} 잡담 {class="border-2 border-muted text-sm px-4 py-1.5 inline-block rounded-md"} 인증 {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-md"} {class="border-2 border-inverted text-sm px-4 py-1.5 inline-block rounded-md"} ({class="border-2 border-inverted text-sm px-4 py-1.5 inline-block rounded-md"}) 편집

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

.dark {
  --ui-border: var(--ui-color-neutral-800);
  --ui-border-muted: var(--ui-color-neutral-700);
  --ui-border-accented: var(--ui-color-neutral-700);
  --ui-border-inverted: white;
}

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

Focus : badge{label="4.9+" class="align-text-top"}

Nuxt UI는 모든 인터랙티브 요소에 focus-visible 아웃라인을 적용하고, 구성 요소의 color prop로 착색합니다, 예를 들어 color="primary" 또는 color="neutral"의 경우 outline-inverted/25.

구성 요소 색상에 관계없이 전체 앱에서 단일 윤곽선 색상을 선호하는 경우 main.css 파일에 전역 규칙을 추가할 수 있습니다.

@import "tailwindcss";
@import "@nuxt/ui";

*,
::before,
::after {
  @apply outline-primary/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --tw-ring-color: var(--ui-primary);
}

@import "tailwindcss";
@import "@nuxt/ui";

*,
::before,
::after {
  @apply outline-inverted/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --tw-ring-color: var(--ui-border-inverted);
}

첫 번째 규칙은 모든 구성 요소의 초점 윤곽을 착색하고, 두 번째 규칙은 변형에 의해 초점에 적용 된 링 색상을 outline 또는 subtle와 같은 보이는 테두리에 정렬하며, 링크가 초점이 맞을 때 강조 표시되는 카드를 포함합니다.

이러한 규칙을 @layer 외부에 선언하여 구성 요소 테마에 의해 설정된 색상보다 우선하도록 하십시오. 첫 번째 규칙은 자신의 요소의 기본 포커스 아웃라인을 색조화하고 FileUpload 또는 [ContentSurroundSurroundxph272727272727277x와 같은 포커스에 대한 변형을 기억하십시오. 다음 구성 요소를 유지합니다.

Radius (## 반지름)

Nuxt UI는 Tailwind CSS의 기본 rounded-* 유틸리티를 통합 된 테두리 반경 시스템으로 대체하므로 ](https://tailwindcss.com/docs/border-radius) 또는 rounded-2xl와 같은 일반 [border 반경 활용도를 사용할 수 있습니다.

xs {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-xs"} SM {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-sm"} MD {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-md"} lg {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-lg"} xl {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-xl"} 2xl {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-2xl"} 3xl {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-3xl"}

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

각 유틸리티는 이 기본값을 곱합니다:

@theme {
  --radius-xs: calc(var(--ui-radius) * 0.5);
  --radius-sm: var(--ui-radius);
  --radius-md: calc(var(--ui-radius) * 1.5);
  --radius-lg: calc(var(--ui-radius) * 2);
  --radius-xl: calc(var(--ui-radius) * 3);
  --radius-2xl: calc(var(--ui-radius) * 4);
  --radius-3xl: calc(var(--ui-radius) * 6);
}

main.css 파일의 기준 반지름 값을 사용자화할 수 있습니다.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.5rem;
}

--ui-radius를 변경하면 Nuxt UI 구성 요소뿐만 아니라 사용자 자신의 마크업 및 타사 구성 요소에서 rounded-xs에서 rounded-3xl로 변경됩니다.

위의 헤더에서 테마 메뉴를 사용하여 기본 반지름 값을 변경합니다.

컨테이너

Nuxt UI는 [Containerxph37x/docs/components/container) 구성 요소의 최대 너비를 제어하는 --ui-container CSS 변수를 제공합니다.

:root {
  --ui-container: 80rem; /* 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);
}

헤더 Name

Nuxt UI 는 Header 구성 요소의 높이를 제어하는 --ui-header-height CSS 변수를 제공합니다.

:root {
  --ui-header-height: 4rem;
}

main.css에서 이 값을 사용자 정의하여 응용 프로그램 전체에서 헤더 높이를 일관되게 조정할 수 있습니다.You can customize this value in your main.css to adjust header height consistently throughout your application:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-header-height: --spacing(24);
}

body 본문

Nuxt UI는 앱의 <body> 요소에 기본 클래스를 적용하여 밝은 모드와 어두운 모드 간에 일관된 테마 지정을 수행합니다.Nuxt UI applies default classes on the <body> element of your app for consistent theming across light and dark modes:

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

Design System

Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.

Components

Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.