Pular para conteúdo

Aula 14 – Estilização Moderna 🎨

Uma aplicação excelente não apenas funciona bem, mas também é agradável de usar. No Vue.js, temos várias formas de gerenciar estilos de forma organizada.

🔐 Scoped CSS

Como já vimos, o atributo scoped garante que o CSS de um componente não "vaze" para os outros. O Vue faz isso adicionando um atributo único (ex: data-v-123) ao HTML e ao CSS durante o build.

<style scoped>
.titulo { color: blue; } /* Só afeta o .titulo DESTE componente */
</style>

📦 CSS Modules

Uma alternativa ao Scoped CSS, onde as classes se tornam objetos JavaScript.

<template>
  <h1 :class="$style.titulo">Olá Mundo</h1>
</template>

<style module>
.titulo { color: red; }
</style>

🌊 Introdução ao Tailwind CSS

O Tailwind é um framework "utility-first" que permite estilizar sua aplicação sem sair do HTML. Ele é extremamente popular no ecossistema Vue.

Por que usar?

  1. Velocidade: Não precisa inventar nomes de classes.
  2. Consistência: Sistema de design pré-definido.
  3. Responsividade: Prefixos simples como md:, lg:.

Exemplo: 

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Botão Tailwind
</button>

📱 Responsividade no Vue

graph LR
    A[Layout Único] --> B{Breakpoints}
    B -- "sm (mobile)" --> C[Coluna Única]
    B -- "md (tablet)" --> D[Duas Colunas]
    B -- "lg (desktop)" --> E[Grid Complexo]

🧠 Dicas de UX

Feedback Visual

Sempre adicione estados de :hover, :active e :disabled aos seus botões e links. Isso faz a aplicação parecer "viva".

Transições

O Vue oferece o componente <Transition> para animar a entrada e saída de elementos (ex: ao usar v-if).

💻 Prática Sugerida

  1. Adicione o Tailwind ao seu projeto: npx tailwindcss init -p.
  2. Estilize seu "Task Manager" da Aula 08 usando apenas classes utilitárias do Tailwind.

📝 Exercício

  1. Qual a diferença entre Scoped CSS e CSS Modules?
  2. Como o Tailwind ajuda na manutenção a longo prazo de grandes aplicações?
  3. Crie um componente que mude de cor de fundo dependendo de uma variável reativa isError.

🚀 Próxima Aula: Vamos preparar nosso app para o mundo real com Build e Deploy!