Design système

Tailwind CSS

Tailwind CSS utilise une configuration CSS-first, vous permettant de définir vos jetons de conception avec la directive [@themexph003https://tailwindcss.com/docs/functions-and-directives#theme-directive) directement dans votre CSS.

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

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

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

Fonts écrit

Utilisez les variables de thème --font-* pour personnaliser la famille de polices utilitaies](https://tailwindcss.com/docs/font-family#customizing-your-theme) dans votre projet.

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

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

couleurs

Utilisez les variables de thème --color-* pour customize vos colors ou override default 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;
}

Breakpoints

Utilisez les variables de thème --breakpoint-* pour personnaliser vos points de rupture ](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

Utilisez les variables de thème --ease-* pour personnaliser la facilité ](https://tailwindcss.com/docs/transition-timing-function#customizing-your-theme) des animations et des transitions de mouvement dans votre projet.

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

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

Les animations d'entrée et de sortie s'exécutent sur --ease-out, les animations de chargement indéterminées sur --ease-in-out, donc en remplaçant ces deux rediffusions de la bibliothèque.

Système XPH121XColor

Le système de couleurs de l'interface utilisateur Nuxt est conçu autour de naming plutôt que de valeurs de couleurs spécifiques. Cette approche rend votre interface utilisateur plus facile à maintenir et facilite le changement de thème.

Couleurs sémantiques

Chaque alias est défini en fonction d'une couleur de votre configuration @theme, qui peut être n'importe quelle couleur que vous définissez en plus de la palette CSS Tailwind par défaut ](xph128).

Ces couleurs sémantiques sont disponibles dans la prop color des composants de l'interface utilisateur Nuxt:

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

Configuration ### Runtime

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

Extend couleurs

Vous pouvez définir des couleurs sémantiques supplémentaires au-delà des valeurs par défaut, comme l'ajout d'une couleur tertiary:

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

Enfin, utilisez cette nouvelle couleur dans les composants qui prennent en charge la prop color ou as une classe:

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