Sistema de diseño

Tailwind CSS (en inglés)

Tailwind CSS utiliza una configuración CSS primero, lo que le permite definir sus tokens de diseño con la directiva @theme directamente en su CSS.

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

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

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

Fuentes (Edición española)

Utilice las variables de tema --font-* para personalizar las utilidades de la familia de fuentes ](https://tailwindcss.com/docs/font-family#customizing-your-theme) en su proyecto.

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

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

colores

Utilice las variables de tema --color-* para personalizar sus colores](https://tailwindcss.com/docs/colors#customizing-your-colors) o override los colores predeterminados .

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

Puntos de ruptura

Utilice las variables de tema --breakpoint-* para personalizar sus puntos de interrupción ](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

Utilice las variables de tema --ease-* para personalizar la facilidad ](https://tailwindcss.com/docs/transition-timing-function#customizing-your-theme) de las animaciones y transiciones de movimiento en su proyecto.

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

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

Las animaciones de entrada y salida se ejecutan en --ease-out, las animaciones de carga indeterminadas en --ease-in-out, por lo que anulan estos dos tiempos de la biblioteca.

Sistema de color ## Color

El sistema de color de la interfaz de usuario de Nuxt está diseñado en torno a naming semántico en lugar de valores de color específicos. Este enfoque hace que su interfaz de usuario sea más fácil de mantener y facilita el cambio de tema.

Colores semánticos

Cada alias se define en función de un color de su configuración @theme, que puede ser cualquier color que defina además de la paleta CSS por defecto de Tailwind .

Estos colores semánticos están disponibles en el prop color de los componentes de la interfaz de usuario de Nuxt:

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

Runtime Configuración

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 colores

Es posible que desee definir colores semánticos adicionales más allá de los valores predeterminados, como la adición de un color 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'
        }
      }
    })
  ]
})

Por último, utilice este nuevo color en los componentes que admiten el accesorio color o as una class:

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