Skip to main content

Apply | CSS

  • Apply | CSS

🧱 1️⃣ O que o @apply faz​

@apply serve para reutilizar classes utilitárias do Tailwind dentro do seu próprio CSS.

Em vez de escrever 10 classes no HTML, você cria um seletor com elas no CSS.

Exemplo:​

.btn {
  @apply bg-blue-500 text-white font-semibold py-2 px-4 rounded;
}

Isso gera o mesmo resultado que se você escrevesse no HTML:

<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded">
  Botão
</button>

👉 Ou seja: @apply é uma forma de "colar" classes do Tailwind dentro de uma classe personalizada.

🧩 2️⃣ Onde colocar o @apply​

Você deve colocar o @apply dentro de uma @layer — geralmente @layer components.

Isso garante que o Tailwind saiba em que camada seu estilo pertence, e respeite a hierarquia (base → components → utilities).

Exemplo real:​

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Seus estilos personalizados */
@layer components {
  .btn {
    @apply bg-blue-500 text-white font-semibold py-2 px-4 rounded;
  }

  .btn:hover {
    @apply bg-blue-600;
  }

  .card {
    @apply bg-white shadow-md rounded p-4;
  }
}

💻 3️⃣ HTML correspondente​

<button class="btn">Salvar</button>
<div class="card">
  <p>Conteúdo do card</p>
</div>

✅ Resultado:

  • O botão e o card usam classes definidas por você, mas os estilos vêm das classes utilitárias do Tailwind.
  • Você mantém a consistência e o poder de customização do Tailwind.

⚙️ 4️⃣ Onde esse CSS vai?​

Você coloca esse código:

  • No seu arquivo globals.css ou app.css, dependendo do framework (Next.js, Vite, etc.)
  • Depois das diretivas @tailwind base; @tailwind components; @tailwind utilities;

Exemplo (em globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-indigo-600 text-white font-bold py-2 px-4 rounded;
  }
  .btn-primary:hover {
    @apply bg-indigo-700;
  }
}

🔥 5️⃣ Vantagens​

✅ Código HTML mais limpo ✅ Reutilização fácil de estilos ✅ Mantém o sistema de design do Tailwind ✅ Pode combinar com pseudo-classes (:hover, :focus, etc.)

⚡ Exemplo completo (copie e teste)​

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @layer components {
      .btn {
        @apply px-4 py-2 rounded font-semibold;
      }

      .btn-blue {
        @apply bg-blue-500 text-white;
      }

      .btn-blue:hover {
        @apply bg-blue-600;
      }

      .btn-green {
        @apply bg-green-500 text-white;
      }

      .btn-green:hover {
        @apply bg-green-600;
      }
    }
  </style>
</head>
<body class="p-6">
  <button class="btn btn-blue">Azul</button>
  <button class="btn btn-green">Verde</button>
</body>
</html>

📘 Resumo rápido​

DiretivaO que faz
@applyUsa classes do Tailwind dentro do CSS
@layer componentsDiz que o estilo faz parte da camada de componentes
VantagemHTML limpo + estilos organizados + aproveita o Tailwind