Das Design System

Tailwind CSS für Mac

Tailwind CSS verwendet eine CSS-First-Konfiguration, mit der Sie Ihre Design-Token mit der [@themexph03xhttps://tailwindcss.com/docs/functions-and-directives#theme-directive)-Direktive direkt in Ihrem CSS definieren können.

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

@theme {
  /* Your custom design tokens go here */
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Fonts (englisch)

Verwenden Sie die Variablen des Designs --font-*, um die Schriftfamilie customize utilities in Ihrem Projekt anzupassen.

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

@theme {
  --font-sans: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

Farben

Verwenden Sie die --color-*-Designvariablen, um Ihre Farben anzupassen ](https://tailwindcss.com/docs/colors#customizing-your-colors) oder override Standardfarben .

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

Breakpoints (Deutsche Übersetzung)

Verwenden Sie die --breakpoint-*-Theme-Variablen, um Ihre Breakpoints customize .

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

@theme {
  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;
}

Motion Bearbeiten

Verwenden Sie die --ease-*-Designvariablen, um die easing](https://tailwindcss.com/docs/transition-timing-function#customizing-your-theme) der Animationen und Bewegungsübergänge in Ihrem Projekt anzupassen.

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

@theme {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

Enter-und Exit-Animationen werden auf --ease-out ausgeführt, unbestimmte Ladeanimationen auf --ease-in-out, sodass diese beiden Wiederholungen der Bibliothek überschrieben werden.

Das XPH121xColor System

Das Farbsystem von Nuxt UI basiert auf semantic naming und nicht auf bestimmten Farbwerten. Dieser Ansatz macht Ihre Benutzeroberfläche wartbarer und macht das Wechseln des Themas einfach.

semantische Farben

Jeder Alias wird basierend auf einer Farbe aus Ihrer @theme-Konfiguration definiert, die jede Farbe sein kann, die Sie zusätzlich zum default Tailwind CSS palette definieren.

Diese semantischen Farben sind in der color-Prop von Nuxt UI-Komponenten verfügbar:

<template>
  <UButton color="primary">Save Changes</UButton>
</template>

Runtime-Konfiguration

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      neutral: 'zinc'
    }
  }
})

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'
        }
      }
    })
  ]
})

Erweitern Sie Farben

Sie können zusätzliche semantische Farben über die Standardwerte hinaus definieren, z. B. das Hinzufügen einer tertiary-Farbe:

export default defineNuxtConfig({
  ui: {
    theme: {
      colors: [
        'primary',
        'secondary',
        'tertiary',
        'info',
        'success',
        'warning',
        'error'
      ]
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      tertiary: 'indigo'
    }
  }
})

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'
        }
      }
    })
  ]
})

Verwenden Sie schließlich diese neue Farbe in Komponenten, die die color-Prop oder as eine class unterstützen:

<UButton color="tertiary">
  Special Action
</UButton>