Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 12.1 — Estilização Atômica com Classes Utilitárias do Tailwind CSS

Contexto: Estilização Atômica com Classes Utilitárias do Tailwind CSS no contexto de Estilização Moderna: Tailwind CSS e CSS Modules.

Requisitos de Execução:

  1. Criar componente de Card responsivo usando classes Tailwind (flex, p-6, bg-white, rounded-xl, shadow-md).

Resultado Esperado

Card estilizado responsivamente com Tailwind CSS.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_1_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Estilização Moderna: Tailwind CSS e CSS Modules
🔑 Gabarito de Código & Solução Comentada 
// TailwindCard.tsx
import React from 'react';

export const TailwindCard: React.FC<{ titulo: string; desc: string }> = ({ titulo, desc }) => {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
      <div>
        <div className="text-xl font-medium text-black">{titulo}</div>
        <p className="text-slate-500">{desc}</p>
      </div>
    </div>
  );
};

🔍 Nível 2: Prática

Problema 12.2 — Variantes de Componente com clsx e tailwind-merge (cn helper)

Contexto: Variantes de Componente com clsx e tailwind-merge (cn helper) no contexto de Estilização Moderna: Tailwind CSS e CSS Modules.

Requisitos de Execução:

  1. Criar utilitário cn(...inputs) para mesclar classes condicionais e resolver conflitos de classes Tailwind.

Resultado Esperado

Utilitário `cn()` combinando classes sem conflito de especificidade.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_2_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Estilização Moderna: Tailwind CSS e CSS Modules
🔑 Gabarito de Código & Solução Comentada 
// utils/cn.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

⚡ Nível 3: Integração

Problema 12.3 — Escopo Local de Estilos com CSS Modules (.module.css)

Contexto: Escopo Local de Estilos com CSS Modules (.module.css) no contexto de Estilização Moderna: Tailwind CSS e CSS Modules.

Requisitos de Execução:

  1. Criar arquivo Botao.module.css com classes .botaoPrimario e importar como objeto de estilos.

Resultado Esperado

Classes com hash único geradas evitando vazamento de estilos globais.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_3_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Estilização Moderna: Tailwind CSS e CSS Modules
🔑 Gabarito de Código & Solução Comentada 
// BotaoModule.tsx
import React from 'react';
import styles from './Botao.module.css';

export const BotaoModule: React.FC<{ texto: string }> = ({ texto }) => {
  return <button className={styles.botaoPrimario}>{texto}</button>;
};

🏆 Nível 4: Desafio Corporativo

Problema 12.4 — Design System com CVA (class-variance-authority)

Contexto: Design System com CVA (class-variance-authority) no contexto de Estilização Moderna: Tailwind CSS e CSS Modules.

Requisitos de Execução:

  1. Criar componente de botão corporativo com variantes primary, secondary, destructive e tamanhos sm, md, lg usando CVA.

Resultado Esperado

Design System corporativo com tipagem estrita de variantes visuais.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_12_4_SeuNome
  2. Envie na tarefa: Atividade Cap 12 - Estilização Moderna: Tailwind CSS e CSS Modules
🔑 Gabarito de Código & Solução Comentada 
// ButtonCVA.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import React from 'react';

const buttonVariants = cva('inline-flex items-center justify-center rounded-md font-medium transition-colors', {
  variants: {
    variant: {
      primary: 'bg-blue-600 text-white hover:bg-blue-700',
      destructive: 'bg-red-600 text-white hover:bg-red-700',
    },
    size: { sm: 'h-8 px-3 text-sm', md: 'h-10 px-4' },
  },
  defaultVariants: { variant: 'primary', size: 'md' },
});

export const CvaButton = ({ variant, size, ...props }: VariantProps<typeof buttonVariants> & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
  <button className={buttonVariants({ variant, size })} {...props} />
);