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:

<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:

/* 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:

<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:

.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;
}

<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.