CSS変数

Nuxt UIはCSS変数をデザイントークンとして使用し、柔軟で一貫性のあるテーマ設定を実現します。

色

Nuxt UIでは、定義した semantic color にTailwind CSSユーティリティクラスが提供されますので、text-errorやbg-successのようなクラス名を使用できます。

プライマリーセカンダリー成功情報警告エラー

#コード

<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);
}
各ユーティリティクラスがライトモードとダークモードに使用するシェードは、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);
}
** config **blackには複数の色合いがないため、primary: 'black'を使用することはできません。無地の黒または白を主な色として使用するには、main.cssファイルに直接設定します。
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

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

テキスト

Nuxt UIではテキストの色のためのTailwind CSSユーティリティクラスを提供しています。そのため、text-dimmedやtext-mutedのようなクラス名を使用できます。

調光ミュートトーン本文ハイライト反転

#コード

<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;
}
これらのCSS変数はmain.cssファイルでカスタマイズできます。
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

.dark {
  --ui-text: white;
}
これらの変数の複数を一度に変更するには、に別の色を割り当てます。

背景

Nuxt UIは背景色のためのTailwind CSSユーティリティクラスを提供しています。そのため、bg-defaultやbg-mutedのようなクラス名を使用できます。

デフォルトミュート昇格アクセント反転

#コード

<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);
}
これらのCSS変数はmain.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);
}

ボーダー

Nuxt UIは、境界線の色のためのTailwind CSSユーティリティクラスを提供しています。そのため、border-defaultやborder-mutedのようなクラス名を使用できます。

デフォルトミュートアクセント反転

#コード

<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);
}
これらのCSS変数はmain.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);
}

フォーカス：バッジ{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);
}

1つ目のルールは、各コンポーネントのフォーカスアウトラインを着色し、2つ目のルールは、outlineやsubtleのような目に見える境界線を持つバリアントによってフォーカスに適用されるリングの色を整列させます。

これらのルールは、コンポーネントテーマによって設定された色よりも優先されるように、@layerの外で宣言してください。最初のルールは、独自の要素のネイティブフォーカスアウトラインも色付けすることに注意してください。 FileUpload または ContentSurround のようにフォーカスしてborder](/docs/components/file-uploadコンポーネントcolorに従ってください。

Radius

Nuxt UIはTailwind CSSのデフォルトのrounded-*ユーティリティを統一された境界半径システムでオーバーライドします。そのため、通常の border半径ユーティリティrounded-xsやrounded-2xlのように使用できます。

xssmmdlgxl2xl3xl

#コード

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

これらのユーティリティクラスは、一貫した外観のためにすべてのコンポーネントに適用される基本半径値を定義するグローバルCSS変数--ui-radiusに基づいて計算されます。

: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クラスにも影響します。
上のヘッダーにある：prose—icon {name="i-lucide-palette" class="text-primary"}テーマメニューを試して、ベース半径の値を変更してください。

コンテナ

Nuxt UIは Container コンポーネントの最大幅を制御するCSS変数--ui-containerを提供します。

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

ヘッダー

Nuxt UIは Header コンポーネントの高さを制御するCSS変数--ui-header-heightを提供します。

:root {
  --ui-header-height: 4rem;
}
main.cssでこの値をカスタマイズして、アプリケーション全体で一貫してヘッダーの高さを調整できます。
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

ボディ

Nuxt UIは、ライトモードとダークモードで一貫したテーマ設定を行うために、アプリの<body>要素にデフォルトクラスを適用します。

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.