Criando componentes reutilizáveis

---

O que é um componente no contexto do Tailwind

Um componente é um bloco reutilizável de interface com estilo, estrutura e comportamento previsíveis. No Tailwind, esse componente pode ser apenas um fragmento HTML com classes utilitárias aplicadas, ou um elemento mais dinâmico em frameworks modernos.

---

Vantagens de componentizar com Tailwind

• Redução de duplicação de código

• Clareza na estrutura visual

• Melhor manutenção e evolução da interface

• Facilidade de aplicar variações (como temas, tamanhos ou estados)

---

Exemplos de componentes simples

Botão

Copy<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
  Ação
</button>

Esse botão pode ser reutilizado em várias partes da interface, com variações condicionais:

Copy<!-- Variante secundária -->
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded">
  Cancelar
</button>

---

Cartão

Copy<div class="bg-white shadow-md rounded-lg p-6">
  <h3 class="text-xl font-bold mb-2">Título</h3>
  <p class="text-gray-600">Conteúdo resumido do cartão.</p>
</div>

Você pode transformar esse bloco em um componente Vue, React ou Blade com props para título, conteúdo e ações.

---

Onde usar componentes

Componentes com Tailwind são especialmente úteis em:

• Design Systems e bibliotecas de UI

• Frameworks com suporte a JSX (React), Templates (Vue) ou Blade (Laravel)

• Integração com CMSs e ferramentas backend

• Geração automatizada de páginas (ex: em aplicações SaaS)

---

Estratégias de reutilização

1. HTML direto: copiar e colar o bloco com utilitárias.

2. Templates/Partials: criar includes (@include, partials/, etc.).

3. Componentes com props: passar dados e estados para personalizar.

4. Usar @apply no CSS (opcional, se estiver usando PostCSS):

Copy.btn {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded;
}

---

O Tailwind CSS se encaixa perfeitamente na lógica de componentes. Ele não impõe uma estrutura, mas facilita a composição, deixando você livre para aplicar como preferir — desde protótipos rápidos até sistemas complexos com centenas de componentes.