Blaise1030/astro-marketing

Sistema de Design Tailwind (v4)

Construa sistemas de design prontos para produção com Tailwind CSS v4, incluindo configuração CSS-primeiro, tokens de design, variantes de componentes, padrões responsivos e acessibilidade.

Nota: Este skill tem como alvo o Tailwind CSS v4 (2024+). Para projetos v3, consulte o guia de atualização.

Quando usar este skill

• Criando uma biblioteca de componentes com Tailwind v4
• Implementando tokens de design e temas com configuração CSS-primeiro
• Construindo componentes responsivos e acessíveis
• Padronizando padrões de UI em uma base de código
• Migrando do Tailwind v3 para v4
• Configurando modo escuro com recursos CSS nativos

Principais mudanças na v4

Padrão v3	Padrão v4
tailwind.config.ts	@theme em CSS
@tailwind base/components/utilities	@import "tailwindcss"
darkMode: "class"	@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors	@theme { --color-*: value }
require("tailwindcss-animate")	CSS @keyframes em @theme + @starting-style para animações de entrada

Início rápido

/* app.css - Configuração CSS-primeiro do Tailwind v4 */
@import "tailwindcss";

/* Defina seu tema com @theme */
@theme {
  /* Tokens de cor semântica usando OKLCH para melhor percepção de cor */
  --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);

  /* Deslocamento do anel para estados de foco */
  --color-ring-offset: oklch(100% 0 0);

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

  /* Tokens de animação - keyframes dentro de @theme são emitidos quando referenciados por variáveis --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 escuro - use @custom-variant para modo escuro baseado em classe */
@custom-variant dark (&:where(.dark, .dark *));

/* Sobrescritas de tema para modo escuro */
.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;
  }
}

Conceitos centrais

1. Hierarquia de tokens de design

Tokens de marca (abstratos)
    └── Tokens semânticos (propósito)
        └── Tokens de componente (específicos)

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

2. Arquitetura de componentes

Estilos base → Variantes → Tamanhos → Estados → Sobrescritas

Padrões detalhados e exemplos práticos

A documentação detalhada de padrões está em references/details.md. Leia esse arquivo quando o nível de navegação acima for insuficiente.