PricingLoginStart free
Tailwind CSS Academy · Ders

@apply Ne Yapar ve Ne Zaman Kullanılır

@apply'nin yardımcı sınıfları bir CSS kuralı içine satır içine nasıl yerleştirdiğini anlayın ve bir sınıfı dışarı çıkarmanın anlamlı olduğu durumları belirleyin.

1. ders / 413 adım

@apply Ne Yapar ve Ne Zaman Kullanılır, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

@apply'ın Çözdüğü Sorun

Tailwind'in yardımcı sınıf öncelikli yaklaşımı, tüm stilleri doğrudan HTML öğelerine yerleştirir. Basit sayfalarda bu uygundur. Ancak 15 yardımcı sınıftan oluşan aynı birleşim 50 düğme öğesinde kullanıldığında, tek bir tasarım ayrıntısını güncellemek 50 yerde değişiklik yapmayı gerektirir. @apply yönergesi, sık tekrarlanan yardımcı sınıf birleşimlerini tek bir özel CSS sınıfına ayırmanıza olanak tanıyarak bu sorunu çözer — böylece Tailwind'in yardımcı sınıf sisteminden vazgeçmeniz gerekmez.

@apply Nasıl Çalışır

@apply, Tailwind'in derleme sırasında işlediği bir PostCSS yönergesidir. Tailwind bir CSS kuralının içinde @apply bg-blue-600 text-white font-semibold ile karşılaştığında, bu yardımcı sınıfların üreteceği CSS bildirimlerini satır içine yerleştirir. Ortaya çıkan CSS kuralı, Tailwind sınıf adlarını değil gerçek özellik değerlerini içerir. Tarayıcıya gönderilen son çıktının Tailwind veya @apply hakkında bilgisi yoktur.

/* Your CSS with @apply */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold text-sm;
  }
  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700;
  }
}

/* Compiled output (what the browser sees) */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.btn-primary {
  /* btn styles + primary colors */
}

Bir CSS Dosyasında @apply Yazma

@applyı Tailwind tarafından işlenen CSS dosyalarının içinde kullanın. Ayrılan bileşen sınıflarını her zaman bir @layer components bloğuna sarın; böylece Tailwind bunları oluşturulan stil sayfasında doğru konuma, temel stillerden sonra ancak yardımcı sınıflardan önce yerleştirir. Bu sayede HTML'de doğrudan uygulanan yardımcı sınıflar, bileşen sınıfı stillerinizi geçersiz kılmaya devam edebilir.

/* styles/components.css or in your main CSS file */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center
           px-4 py-2 rounded-lg text-sm font-semibold
           transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

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

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800
           hover:bg-gray-300
           focus:ring-gray-500;
  }
}

@apply Ne Zaman Kullanılmalı

@apply için uygun durumlar sınırlı ve özeldir. Şu durumlarda kullanın: aynı yardımcı sınıf birleşimi 5 veya daha fazla yerde kelimesi kelimesine kullanılıyorsa; bileşen, HTML'i kontrol edemediğiniz bir bağlamda oluşturuluyorsa (Markdown ile oluşturulan içerik veya üçüncü taraf bir bileşen gibi); ya da çerçeve sınırlamaları sınıf tabanlı koşullu mantığı uygulanamaz hâle getiriyorsa. JSX bileşenleri, Vue bileşenleri veya HTML parçaları kullanabiliyorsanız bunlar neredeyse her zaman daha iyi bir seçimdir.

Yaygın @apply Kullanım Alanları

Pratik @apply kullanım alanları arasında birçok düğme örneğinde ortak kullanılan temel düğme stilleri, tüm form girişlerine aynı şekilde uygulanan sıfırlama stilleri, Markdown ile oluşturulan blog içeriği için tipografi stilleri ve değiştiremediğiniz üçüncü taraf bileşen HTML'ine gömülü yardımcı sınıflar bulunur. Tüm bu durumların ortak noktası, yardımcı sınıfları ihtiyaç duyan HTML öğesine doğrudan ekleyememenizdir.

@layer components {
  /* Used in markdown-rendered content where you can't add classes to elements */
  .content h1 { @apply text-3xl font-bold mb-4 text-gray-900; }
  .content h2 { @apply text-2xl font-semibold mb-3 text-gray-800; }
  .content p  { @apply text-gray-600 leading-relaxed mb-4; }
  .content a  { @apply text-blue-600 underline hover:text-blue-800; }
  .content ul { @apply list-disc list-inside mb-4 space-y-1; }

  /* Shared input base */
  .form-field {
    @apply w-full rounded-lg border border-gray-300 px-4 py-2
           focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm;
  }
}

@layer Yönergesi

Tailwind'in üç katmanı vardır: base, components ve utilities. Öğe sıfırlamaları ve genel varsayılanlar için @layer base kullanın. @apply ile oluşturulan ayrılmış bileşen sınıfları için @layer components kullanın. Özel, tek amaçlı yardımcı sınıflar için @layer utilities kullanın. Katman sırası, beklenen öncelik hiyerarşisini koruyarak yardımcı sınıfların her zaman bileşen sınıflarını, bileşen sınıflarının da temel stilleri geçersiz kılmasını sağlar.

@layer base {
  /* Global resets and element defaults */
  body { @apply font-sans text-gray-900 antialiased; }
  a { @apply text-blue-600 hover:underline; }
}

@layer components {
  /* Extracted multi-utility patterns */
  .card { @apply bg-white rounded-xl shadow p-6; }
}

@layer utilities {
  /* Custom single-purpose utilities */
  .text-balance { text-wrap: balance; }
}

@apply ile Değiştiricileri Uygulama

Durum ve duyarlı tasarım değiştiricilerini, HTML'de olduğu gibi @apply içinde kullanabilirsiniz. hover:bg-blue-700, focus:ring-2 veya md:flex ifadelerini doğrudan @apply bildiriminize yazın; Tailwind, seçici tabanlı doğru CSS'i üretir. @applyın elle CSS yazmaktan daha güçlü olmasının nedenlerinden biri budur — hiçbir ek çaba harcamadan tam varyant sistemine sahip olursunuz.

@layer components {
  .badge {
    @apply
      inline-flex items-center px-2.5 py-0.5 rounded-full
      text-xs font-medium
      bg-gray-100 text-gray-700
      /* Hover state */
      hover:bg-gray-200
      /* Dark mode */
      dark:bg-gray-700 dark:text-gray-300
      dark:hover:bg-gray-600
      /* Transition */
      transition-colors duration-150;
  }
}

@apply Sınıflarını Zincirleme

@apply ile oluşturulan diğer bileşen sınıflarına başka bir @apply içinde başvurabilirsiniz. Örneğin bir .btn temel sınıfı tanımlayıp tüm temel düğme stillerini devralmak için ona .btn-primary içinde başvurabilirsiniz. Bu, basit bir kalıtım zinciri oluşturur. Derin iç içe geçirme konusunda dikkatli olun — hata ayıklama sırasında izlenmesi zor olabilecek örtük bağımlılıklar oluşturur.

@layer components {
  /* Base class */
  .btn {
    @apply inline-flex items-center px-4 py-2 rounded-lg
           text-sm font-medium transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  /* Variants inherit from .btn */
  .btn-primary   { @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500; }
  .btn-danger    { @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; }
  .btn-ghost     { @apply btn text-gray-700 hover:bg-gray-100 focus:ring-gray-400; }
}

SFC Stillerinde @apply

Vue Tek Dosyalı Bileşenlerinde (SFC'ler) ve CSS Modules kullanan bazı React kurulumlarında @applyı bileşenin <style> bloğunun içinde kullanabilirsiniz. Bu, bileşen stillerini şablonla aynı yerde tutarken Tailwind yardımcı sınıflarını yapı taşları olarak kullanmaya devam etmenizi sağlar. @applyı etkinleştirmek için paketleyicinizi bu stil bloklarını Tailwind eklentisiyle birlikte PostCSS üzerinden işleyecek şekilde yapılandırın.

<!-- Vue SFC with @apply in <style> -->
<template>
  <button class="btn">Click Me</button>
</template>

<style scoped>
  .btn {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg
           font-medium hover:bg-blue-700
           transition-colors duration-150;
  }
</style>

Doğru Soru: @apply Gerekli mi

@applya başvurmadan önce her zaman şunu sorun: bunu bunun yerine bir bileşene ayırabilir miyim? React'te bu, variant özelliğini kabul eden bir Button bileşeni anlamına gelir. HTML'de ise bir parça veya şablon eklemesi anlamına gelir. Bileşene ayırmak genellikle @applytan daha iyidir; çünkü açıktır, aranabilir ve tüm çerçevelerle çalışır. @applyı yalnızca bileşene ayırmanın mümkün veya uygulanabilir olmadığı durumlarda kullanın.

/* Instead of @apply in a CSS file... */
.btn-primary { @apply bg-blue-600 text-white px-4 py-2 rounded-lg; }

/* Prefer a JSX component */
function Button({ children, variant = 'primary' }) {
  const styles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };
  return (
    <button className={'px-4 py-2 rounded-lg font-medium ' + styles[variant]}>
      {children}
    </button>
  );
}

@apply Çıktısını Doğrulama

Bir @apply kuralı yazdıktan sonra CSS'inizi derleyip çıktıyı inceleyerek doğru şekilde derlendiğini doğrulayın. Oluşturduğunuz sınıf adını derlenmiş CSS dosyasında arayın. Derleme sırasında kaldırılan @apply söz dizimini değil, satır içine yerleştirilmiş tam CSS bildirimlerini görmelisiniz. Sınıf eksikse veya beklenmeyen özellikler gösteriyorsa @layer konumunu kontrol edin ve başvurulan tüm yardımcı sınıfların geçerli Tailwind sınıfları olduğundan emin olun.

# Build and search for your custom class
npx tailwindcss -i ./src/input.css -o ./dist/output.css
grep '.btn-primary' ./dist/output.css

# Or watch mode for real-time feedback
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Hızlı Kontrol

Tailwind CSS'teki @apply yönergesi konusundaki anlayışınızı sınayın.

İnteraktif derste cevapla

Ders Özeti

Bu derste şunları öğrendiniz: @apply, yardımcı sınıf CSS'ini özel bir sınıf adına satır içine yerleştirir ve sınıfları doğrudan ekleyemediğiniz içerikler için idealdir; uygun önceliği korumak için @apply tabanlı sınıfları her zaman @layer components içinde tanımlayın ve mümkün olduğunda bileşene ayırma (JSX, Vue SFC, HTML parçaları) genellikle @applya tercih edilir. Sırada @apply ile yeniden kullanılabilir bileşen sınıfları oluşturacağız.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
30
Dersler
120
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“@apply Ne Yapar ve Ne Zaman Kullanılır” dersi ücretsiz mi?

Evet — “@apply Ne Yapar ve Ne Zaman Kullanılır” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“@apply Ne Yapar ve Ne Zaman Kullanılır” dersinde ne öğreneceğim?

@apply'nin yardımcı sınıfları bir CSS kuralı içine satır içine nasıl yerleştirdiğini anlayın ve bir sınıfı dışarı çıkarmanın anlamlı olduğu durumları belirleyin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“@apply Ne Yapar ve Ne Zaman Kullanılır” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. @apply Ne Yapar ve Ne Zaman Kullanılır
  2. Yeniden Kullanılabilir Bileşen Sınıfları Oluşturma
  3. Özel CSS'yi Katmanlarla Düzenleme
  4. @apply Sorunları ve Alternatifleri
← Tailwind CSS Academy Sayfasına Dön