Blaise1030/astro-marketing

Sistema de Diseño con Tailwind (v4)

Construye sistemas de diseño listos para producción con Tailwind CSS v4, incluyendo configuración CSS-first, tokens de diseño, variantes de componentes, patrones responsivos y accesibilidad.

Nota: Esta habilidad está dirigida a Tailwind CSS v4 (2024+). Para proyectos con v3, consulta la guía de actualización.

Cuándo Usar Esta Habilidad

• Crear una biblioteca de componentes con Tailwind v4
• Implementar tokens de diseño y theming con configuración CSS-first
• Construir componentes responsivos y accesibles
• Estandarizar patrones de UI en una base de código
• Migrar de Tailwind v3 a v4
• Configurar el modo oscuro con funciones nativas de CSS

Principales Cambios en v4

Patrón v3	Patrón v4
tailwind.config.ts	@theme en CSS
@tailwind base/components/utilities	@import "tailwindcss"
darkMode: "class"	@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors	@theme { --color-*: valor }
require("tailwindcss-animate")	@keyframes en @theme + @starting-style para animaciones de entrada

Inicio Rápido

/* app.css - Configuración CSS-first de Tailwind v4 */
@import "tailwindcss";

/* Define tu tema con @theme */
@theme {
  /* Tokens de color semántico usando OKLCH para una mejor percepción del color */
  --color-background: oklch(100% 0 0);
  --color-foreground: oklch(14.5% 0.025 264);

  --color-primary: oklch(14.5% 0.025 264);
  --color-primary-foreground: oklch(98% 0.01 264);

  --color-secondary: oklch(96% 0.01 264);
  --color-secondary-foreground: oklch(14.5% 0.025 264);

  --color-muted: oklch(96% 0.01 264);
  --color-muted-foreground: oklch(46% 0.02 264);

  --color-accent: oklch(96% 0.01 264);
  --color-accent-foreground: oklch(14.5% 0.025 264);

  --color-destructive: oklch(53% 0.22 27);
  --color-destructive-foreground: oklch(98% 0.01 264);

  --color-border: oklch(91% 0.01 264);
  --color-ring: oklch(14.5% 0.025 264);

  --color-card: oklch(100% 0 0);
  --color-card-foreground: oklch(14.5% 0.025 264);

  /* Offset del anillo para estados de foco */
  --color-ring-offset: oklch(100% 0 0);

  /* Tokens de radio */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Tokens de animación - los keyframes dentro de @theme se emiten cuando son referenciados por variables --animate-* */
  --animate-fade-in: fade-in 0.2s ease-out;
  --animate-fade-out: fade-out 0.2s ease-in;
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-slide-out: slide-out 0.3s ease-in;

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes slide-in {
    from {
      transform: translateY(-0.5rem);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(-0.5rem);
      opacity: 0;
    }
  }
}

/* Variante de modo oscuro - usa @custom-variant para modo oscuro basado en clases */
@custom-variant dark (&:where(.dark, .dark *));

/* Sobreescrituras del tema oscuro */
.dark {
  --color-background: oklch(14.5% 0.025 264);
  --color-foreground: oklch(98% 0.01 264);

  --color-primary: oklch(98% 0.01 264);
  --color-primary-foreground: oklch(14.5% 0.025 264);

  --color-secondary: oklch(22% 0.02 264);
  --color-secondary-foreground: oklch(98% 0.01 264);

  --color-muted: oklch(22% 0.02 264);
  --color-muted-foreground: oklch(65% 0.02 264);

  --color-accent: oklch(22% 0.02 264);
  --color-accent-foreground: oklch(98% 0.01 264);

  --color-destructive: oklch(42% 0.15 27);
  --color-destructive-foreground: oklch(98% 0.01 264);

  --color-border: oklch(22% 0.02 264);
  --color-ring: oklch(83% 0.02 264);

  --color-card: oklch(14.5% 0.025 264);
  --color-card-foreground: oklch(98% 0.01 264);

  --color-ring-offset: oklch(14.5% 0.025 264);
}

/* Estilos base */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
  }
}

Conceptos Clave

1. Jerarquía de Tokens de Diseño

Tokens de Marca (abstractos)
    └── Tokens Semánticos (propósito)
        └── Tokens de Componente (específicos)

Ejemplo:
    oklch(45% 0.2 260) → --color-primary → bg-primary

2. Arquitectura de Componentes

Estilos base → Variantes → Tamaños → Estados → Sobreescrituras

Patrones detallados y ejemplos prácticos

La documentación detallada de patrones se encuentra en references/details.md. Lee ese archivo cuando el nivel de navegación anterior sea insuficiente.