@apply és custom CSS

Mi az @apply?

Az @apply segítségével Tailwind utility class-eket "beolvaszthatsz" egy saját CSS osztályba:

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg transition-colors;
  }
}

Mikor hasznos?

Az @apply akkor indokolt, ha:

Nem komponens-alapú keretrendszerben dolgozol (plain HTML, WordPress, stb.)
Harmadik fél könyvtár generált HTML-jét kell stílozni (pl. CMS tartalom)
Nagyon alap, globálisan ismétlődő mintákat akarsz kiszervezni

/* Globális form input stílus – nem komponens, hanem az összes input */
@layer components {
  .form-input {
    @apply block w-full rounded-lg border-gray-300 shadow-sm
           focus:border-blue-500 focus:ring-blue-500 text-sm;
  }
}

Mikor NEM ajánlott az @apply?

React / Next.js projektben az @apply anti-pattern – a komponensek jobban kezelik az újrafelhasználhatóságot.

/* ❌ Kerülendő React projektben: */
.card {
  @apply bg-white rounded-xl shadow-md p-6;
}

/* ✅ Helyette: JSX komponens */

Az @apply elrejti, hogy valójában mi történik – elveszíted a Tailwind leghasznosabb tulajdonságát, az átláthatóságot. Ha azt látod, hogy egy komponens class="card" class-t kap, nem tudod azonnal, mi a stílusa.

@layer

A @layer direktívával meghatározod, hova kerüljön a CSS a cascade-ben:

@layer base {
  /* Alap HTML elem stílusok */
  h1 { @apply text-3xl font-bold; }
  a { @apply text-blue-600 hover:underline; }
}

@layer components {
  /* Újrahasználható komponens osztályok */
  .badge { @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full; }
}

@layer utilities {
  /* Saját utility class-ek */
  .text-balance { text-wrap: balance; }
}

Összefoglaló

Az @apply hasznos eszköz, de korlátozott körülmények között. React projektben majdnem soha nincs rá szükség – a JSX komponensek jobbak. Plain HTML oldalakon vagy CMS-alapú projekteknél viszont rendkívül hasznos lehet.

@apply és custom CSS