デザインシステム
Tailwind CSS
Tailwind CSSはCSSファーストの設定を使用しており、CSSで直接@themeディレクティブを使用してデザイントークンを定義できます。これにより、テーマは移植性、保守性、カスタマイズが容易になります。
@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-*テーマ変数を使用してプロジェクトのフォントファミリーユーティリティをカスタマイズします。
@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;
}
Motion
--ease-*テーマ変数を使用して、xをプロジェクト内のアニメーションと動きのトランジションのeasing](をカスタマイズします。
@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という名前のを中心に設計されています。このアプローチにより、UIのメンテナンス性が向上し、テーマの切り替えが容易になります。
セマンティックカラー
Nuxt UIは、色のforpusposeを記述するセマンティックなカラーエイリアスを提供します。各エイリアスは@theme設定の色に基づいて定義されます。default Tailwind CSS paletteに加えて、定義した色を指定することができます。
| 色 | デフォルト | 説明 |
|---|---|---|
primary | green | 主なCTA、アクティブナビゲーション、ブランド要素、重要なリンク |
secondary | blue | セカンダリボタン、代替アクション、補完的なUI要素 |
success | green | 成功メッセージ、完了状態、肯定的な確認 |
info | blue | 情報アラート、ツールチップ、ヘルプテキスト、中立通知 |
warning | yellow | 警告メッセージ、保留中の状態、注意が必要な項目 |
error | red | エラーメッセージ、検証エラー、破壊的なアクション |
neutral | slate | テキスト、ボーダー、背景、無効状態 |
これらのセマンティックカラーは、Nuxt UIコンポーネントのcolorプロパティで使用できます。
<template>
<UButton color="primary">Save Changes</UButton>
</template>Runtime設定
実行時に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'
}
}
})
]
})
- Tailwindのデフォルトカラーを使う
bluegreenzincなど - x
@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>