Exercícios: Aula 14 - Estilização Moderna 🎨

1. CSS Scoped e Global

Crie um componente que tenha um parágrafo personalizado com uma cor rosa usando <style scoped>. Logo abaixo, crie um parágrafo normal em App.vue. Verifique se o parágrafo do App também ficou rosa. Explique o resultado.

2. Introdução ao Tailwind (Conceitual)

Transforme o seguinte CSS tradicional em classes utilitárias do Tailwind CSS:

.meu-botao {
  background-color: #3b82f6;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: white;
  font-weight: bold;
}

3. Classes Dinâmicas

Crie uma lista de alertas. Cada alerta pode ser do tipo "sucesso", "erro" ou "aviso". Use a diretiva :class para mudar a cor de fundo do alerta com base no seu tipo.

4. Variáveis Reativas no CSS

No Vue 3, use o v-bind() dentro da tag <style> para que a largura de uma barra de progresso seja controlada por uma variável reativa do JavaScript. width: v-bind(porcentagem + '%');

5. Desafio: Dark Mode Simples

Crie um botão de "Alternar Tema". - Ao clicar, ele deve adicionar ou remover a classe .dark na tag principal do app ou no body. - Defina variáveis CSS para cor de fundo e cor de texto que mudam quando a classe .dark está ativa. - Use transições CSS para que a mudança de cores seja suave.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Classes Dinâmicas
function solucaoExercicio() {
    console.log("Executando validação de: Estilização Moderna");
    return true;
}

solucaoExercicio();