Organizando estilos com @apply

---

O que é @apply

A diretiva @apply permite agrupar classes utilitárias em uma única classe CSS, mantendo o poder do Tailwind com mais organização. Isso é especialmente útil em projetos maiores, onde certos padrões visuais se repetem em múltiplos lugares.

---

Exemplo básico

Em vez de repetir as mesmas classes em todos os botões:

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

Você pode criar uma classe customizada:

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

E então usar no HTML:

Copy<button class="btn">Enviar</button>

---

Vantagens do uso de @apply

1. Organização do código

Evita repetição excessiva de classes utilitárias no HTML, mantendo os arquivos mais limpos.

---

2. Centralização de estilo

Você pode alterar o estilo global de todos os botões, cartões, badges etc. editando um único lugar, sem precisar buscar e substituir em vários arquivos.

---

3. Flexibilidade para variações

Você pode criar variações sem repetir tudo:

Copy.btn {
  @apply font-semibold py-2 px-4 rounded;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white;
}

.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-800;
}

Copy<button class="btn btn-primary">Salvar</button>
<button class="btn btn-secondary">Cancelar</button>

---

Quando usar @apply

Use quando:

• Um conjunto de classes é reutilizado em diversos lugares.

• Você deseja criar uma camada de componentes sem usar React, Vue, ou outro framework.

• O HTML está ficando muito extenso ou difícil de manter.

• Seu projeto possui Design System e precisa de padronização visual.

---

Boas práticas

• Use @apply apenas em estilos base. Deixe variações específicas no HTML quando necessário.

• Evite exagerar e recriar um sistema de classes genérico — mantenha a essência utility-first.

• Combine com nomeações semânticas (.btn, .card, .alert) para facilitar o entendimento.

---

Requisitos

O uso de @apply requer que o Tailwind esteja configurado com PostCSS ou ferramentas que processam CSS (como Vite, Webpack, etc.).
Não é possível usar @apply quando o Tailwind é carregado via CDN.

---

A diretiva @apply oferece o melhor dos dois mundos: você mantém a performance e a flexibilidade do Tailwind, mas com a organização de um CSS tradicional.