Saltar al contenido
guia personalizacion tailwind

# Guía de personalización

Admin · 2 de julio de 2026

## Personalización completa

Astro Lite está diseñado para ser fácil de personalizar. Aquí te mostramos cómo.

### Cambiar tipografía

Edita los tokens de tipografía en `src/styles/tokens/typography.css`:

    :root {
      --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.0625rem);
      /* Ajusta los valores clamp() para cambiar el tamaño base */
    }

### Agregar nuevos temas

1. Crea un archivo CSS en `src/styles/themes/`
2. Define los tokens de color para light y dark mode
3. Importa el archivo en `global.css`
4. Agrega el tema a `themes.config.ts`

### Agregar nuevas páginas

1. Crea un archivo `.astro` en `src/pages/`
2. Usa `BaseLayout` como wrapper
3. Agrega el link a la navegación en `nav.config.ts`

### Personalizar componentes

Los componentes usan CVA (Class Variance Authority) para manejar variantes. Cada componente tiene un archivo `*.variants.ts` donde puedes agregar o modificar estilos.

Ejemplo de Button:

    // button.variants.ts
    export const buttonVariants = cva(
      'inline-flex items-center justify-center...',
      {
        variants: {
          variant: {
            primary: 'bg-primary text-primary-foreground...',
            // Agrega tu variante personalizada
            gradient: 'bg-gradient-to-r from-brand-500 to-brand-700...',
          },
        },
      }
    );

## Tips

- Usa los design tokens (`var(--color-brand-500)`) en lugar de colores hardcodeados
- Los componentes son modulares: importa solo lo que necesites
- El dark mode funciona automáticamente con los tokens semánticos

← Volver al blog