📊 Capítulo 12: Tailwind CSS & Shadcn UI

Especialização em Frontend com React

🗺️ O Ecossistema de Design System Moderno no React

flowchart LR
    TAILWIND["Tailwind CSS v4 (Utilitários Atômicos / JIT Compiler)"]
    --> CVA["Class Variance Authority - cva()\n(Variantes tipadas: variant, size)"]
    --> TW_MERGE["tailwind-merge + clsx (cn helper)\n(Resolve conflitos de classes CSS)"]
    --> SHADCN["Shadcn UI (Componentes acessíveis copiados direto no seu código-fonte!)"]

    style TAILWIND fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style CVA fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style TW_MERGE fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style SHADCN fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: A Filosofia do Shadcn UI

• Não é uma biblioteca de componentes instalada no node_modules: Os componentes são copiados para a sua pasta components/ui/, dando 100% de controle sobre o código e o CSS!

• Baseado no Radix UI para acessibilidade total (WAI-ARIA).

🎯 Slide 2: Variantes Tipadas com CVA

import { cva } from 'class-variance-authority';

const botaoVariantes = cva('inline-flex items-center justify-center rounded-md font-medium', {
  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
      destructive: 'bg-destructive text-destructive-foreground',
      outline: 'border border-input bg-background',
    },
    size: { sm: 'h-9 px-3', lg: 'h-11 px-8' }
  },
  defaultVariants: { variant: 'default', size: 'sm' }
});

🎯 Slide 3: A Função Utilitária cn()

• export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
• Resolve problemas onde classes concorrentes sobrescrevem umas às outras incorretamente no HTML!