Tailwind CSS Öğrenme Rehberi: Temellerden Kalıplara

Tailwind nasıl çalışır?

Tailwind, içinde binlerce kural bulunan hazır bir CSS dosyası dağıtmaz. Resmî belgelere göre derleyici proje dosyalarınızı düz metin olarak tarar, sınıf adına benzeyen her parçayı toplar ve yalnızca bilinen bir utility'ye karşılık gelenler için CSS üretir. Sonuç, sadece kullandığınız sınıfları içeren tek bir stil dosyasıdır. Bu yüzden bir sınıf adının kaynakta tam haliyle yazılması gerekir; çalışma zamanında parça parça birleştirilen adlar derleyici tarafından görülmez. Tarama, varsayılan olarak .gitignore içindeki yolları, node_modules klasörünü, ikili dosyaları ve CSS dosyalarını atlar.

Bunu küçük bir örnekle görelim. Tek satırlık bir HTML dosyasını, taramayı yalnızca o dosyaya sınırlayan bir giriş CSS'iyle derledik:

@import "tailwindcss" source(none);
@source "./ornek.html";

<h1 class="text-3xl font-bold underline md:p-8 hover:bg-sky-500">Merhaba</h1>

v4.3.5 ile derlenen CSS (Preflight kuralları ve dosya sonundaki yardımcı bloklar kısaltıldı):

/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --spacing: 0.25rem;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-bold: 700;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  /* (kısaltıldı) */
}
@layer utilities {
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .underline {
    text-decoration-line: underline;
  }
  @media (hover: hover) {
    .hover\:bg-sky-500:hover {
      background-color: var(--color-sky-500);
    }
  }
  @media (width >= 48rem) {
    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }
  }
}
/* (kısaltıldı) */

Bu çıktı Tailwind'in dört katmanlı yapısını özetler. İlk satırlardaki @layer theme, base, components, utilities; bildirimi katmanların önceliğini sabitler: sonra gelen katman öncekini ezer. theme katmanı yalnızca kullanılan tema değişkenlerini :root üzerine yazar; bütün paletten sadece --color-sky-500 geldi. base katmanı Preflight adlı temel stilleri taşır. components katmanı sizin bileşen sınıflarınız için ayrılmıştır ve bu örnekte boştur. utilities katmanı ise HTML'de bulunan beş sınıfın kurallarını içerir; varyantlı sınıflar ilgili medya sorgusuna alınır. Değerlerin çoğunun calc(var(--spacing) * 8) gibi tema değişkenleri üzerinden hesaplandığına da dikkat edin.

Kendi CSS'inizi de bu katmanlara yazarsınız: temel eleman stilleri @layer base, yeniden kullanılan bileşen sınıfları @layer components içine girer; yeni utility sınıfları ise @utility direktifiyle tanımlanır. Tasarım değerleri @theme ile tema değişkeni olarak eklenir ve otomatik olarak yeni sınıflar doğurur. Bu mekanizmaların her biri aşağıdaki yazılarda kendi derleme örnekleriyle anlatılıyor.

1. Temeller ve kurulum

Seriye buradan başlayın. Bu yazılar derleyicinin girdisini, çıktısını ve sınıf adlarının dilini öğretir; sonraki bütün konular bu temele dayanır.

• Tailwind utility class mantığı: Bir sınıf adının varyant, özellik, değer, negatif işaret ve modifier parçalarını üretilen CSS üzerinden okumayı öğretir.
• Tailwind standalone CLI kullanımı: Node kurmadan derleme, --minify, --optimize, --map bayrakları ve canonicalize komutunu gerçek çıktılarla gösterir.
• Tailwind Vite ve PostCSS kurulumu: Vite eklentisi, PostCSS eklentisi ve npm CLI yollarının resmî kurulum adımlarını karşılaştırır.
• Tailwind sınıf tarama ve @source: Hangi dosyaların tarandığını, @source, source(none) ve @source inline() ile nasıl yönetildiğini ve dinamik sınıf adlarının neden çalışmadığını anlatır.
• Tailwind Preflight temel stilleri: Margin, kenarlık, başlık, liste ve resim sıfırlamalarını, @layer base ile genişletmeyi ve Preflight'ı kapatmayı açıklar.
• Tailwind arbitrary values: Köşeli parantezle tema dışı değer yazmayı, alt çizgi kuralını, değişken kısayolunu ve tür ipuçlarını öğretir.

2. Boşluk, boyut ve yerleşim

Sayfadaki her kutunun iç ve dış boşluğu, boyutu, görünürlüğü ve konumu bu bölümün konusudur. Düzen kurmaya geçmeden önce bu sınıfları tanımak, flexbox ve grid yazılarını çok daha kolay hale getirir.

• Tailwind padding ve margin: --spacing ölçeğini, yön sınıflarını, negatif margin ve mx-auto kullanımını anlatır.
• Tailwind gap, space-x ve divide: Öğeler arası boşluk için gap, space-x/space-y ve ayırıcı çizgiler için divide sınıflarını karşılaştırır.
• Tailwind width, height ve size: Genişlik ve yükseklik sınıflarını, kesirleri, ekran birimlerini ve min/max sınırlarını gösterir.
• Tailwind display sınıfları: block, hidden, contents, flow-root ve görünürlük sınıflarını açıklar.
• Tailwind position ve inset: relative, absolute, fixed, sticky, konum ofsetleri ve z-index sınıflarını anlatır.
• Tailwind overflow ve scroll snap: Taşma kontrolünü, yumuşak kaydırmayı ve kaydırma yakalama sınıflarını öğretir.
• Tailwind container sınıfı: container sınıfının kırılma noktalarına göre genişliğini ve @utility ile özelleştirilmesini gösterir.

3. Flexbox ve grid

Modern sayfa düzeninin iki temel aracı burada Tailwind sınıflarıyla işlenir. Kavramların saf CSS tarafı için CSS flexbox ve CSS grid yazılarına da bakabilirsiniz.

• Tailwind flexbox sınıfları: Flex kapsayıcısı, yön, sarma ve hizalama sınıflarıyla tek boyutlu düzen kurmayı anlatır.
• Tailwind flex-1, grow, shrink ve basis: Flex öğelerinin büyüme, küçülme, temel boyut ve sıra davranışını açıklar.
• Tailwind grid-cols ve grid-rows: Kolon ve satır şablonlarını, keyfi şablonları ve subgrid kullanımını gösterir.
• Tailwind col-span ve grid yerleşimi: Öğeleri birden fazla hücreye yaymayı, başlangıç ve bitiş çizgilerini ve otomatik yerleşimi öğretir.
• Tailwind justify-items ve place-content: Grid odaklı hizalama sınıflarının hangi ekseni etkilediğini karşılaştırır.
• Tailwind ile div ortalama: Bir öğeyi yatay, dikey ve her iki yönde ortalamanın bilinen Tailwind tariflerini derler.

4. Responsive tasarım ve durumlar

Bu bölüm sınıfları koşula bağlamayı öğretir: ekran genişliğine, kapsayıcı boyutuna ve kullanıcı etkileşimine göre değişen stiller. Responsive kavramının kendisi için mobil uyumluluk yazısına göz atabilirsiniz.

• Tailwind responsive tasarım: Mobil öncelikli yaklaşımı ve sm, md, lg öneklerinin ürettiği medya sorgularını anlatır.
• Tailwind breakpoint özelleştirme: max-* aralıklarını, keyfi kırılma noktalarını ve tema ile yeni kırılma noktası eklemeyi gösterir.
• Tailwind container queries: @container ve @sm: gibi öneklerle kapsayıcı boyutuna göre stil vermeyi öğretir.
• Tailwind hover, focus ve active: Etkileşim durumlarını, varyantların yığılmasını ve hover'ın dokunmatik ekranlardaki davranışını açıklar.
• Tailwind group ve peer: Üst elemanın ya da kardeş elemanın durumuna göre stil vermeyi group-*, peer-* ve has-* ile anlatır.
• Tailwind form stilleri: Geçersiz, işaretli ve placeholder durumlarını, dosya seçici ve form elemanı görünümünü ele alır.

5. Renk ve tipografi

Rengi ve metni biçimlendiren sınıflar, tasarımın en sık dokunulan kısmıdır. Renk değerlerinin CSS tarafı için CSS renk değerleri yazısı, koyu tema kavramı için CSS dark mode yazısı tamamlayıcıdır.

• Tailwind renk paleti ve tonlar: Varsayılan paleti, ton numaralarını, oklch değerlerini ve temaya özel renk eklemeyi anlatır.
• Tailwind renk opaklığı: /50 gibi renk modifier'larının ürettiği color-mix() çıktısını ve opacity-* sınıfından farkını gösterir.
• Tailwind dark mode: dark: önekinin varsayılan davranışını ve sınıf ya da veri özelliğiyle elle kontrol edilen koyu temayı açıklar.
• Tailwind font size, weight ve family: Yazı boyutu ölçeğini, satır yüksekliği eşleşmesini, kalınlıkları ve özel yazı tipi tanımlamayı öğretir.
• Tailwind metin hizalama, leading ve tracking: Hizalama, satır aralığı, harf aralığı, büyük-küçük harf ve alt çizgi sınıflarını anlatır.
• Tailwind truncate ve line-clamp: Uzun metni tek ya da çok satırda kesmeyi, boşluk ve kelime kırma davranışlarını gösterir.

6. Kenar, gölge, efekt ve hareket

Arayüze derinlik ve canlılık katan sınıflar bu bölümde toplanır. Birçoğu tek bir CSS özelliğini birden fazla sınıfın paylaştığı değişken tabanlı yapıyı kullanır.

• Tailwind border ve rounded: Kenarlık genişliği, rengi, stili ve köşe yarıçapı ölçeğini v4.3.5 değerleriyle anlatır.
• Tailwind shadow ve ring: Gölge ölçeğini, renkli ve iç gölgeleri, ring ile odak halkası kurmayı açıklar.
• Tailwind gradient: Doğrusal, dairesel ve konik gradyanları, renk duraklarını ve gradyan metni gösterir.
• Tailwind blur ve backdrop filtreleri: Bulanıklık, parlaklık ve diğer filtreleri, arka plan filtreleriyle cam efektini öğretir.
• Tailwind transition, duration ve ease: Geçiş özelliklerini, süre, zamanlama ve gecikme sınıflarını, hareket azaltma tercihini anlatır.
• Tailwind animasyonları: Hazır animasyonları ve tema ile kendi animasyonunuzu tanımlamayı gösterir.

7. Dönüşüm, özelleştirme ve direktifler

Bu bölüm Tailwind'i kendi tasarım sisteminize uyarlamanın araçlarını öğretir. Burada anlatılan direktifler, önceki bölümlerdeki bütün sınıfların arkasındaki mekanizmadır.

• Tailwind transform, scale, rotate ve translate: Ölçekleme, döndürme, kaydırma, eğme ve 3B dönüşüm sınıflarını anlatır.
• Tailwind @theme direktifi: Tema değişkeni ad alanlarını, varsayılanları genişletmeyi ve ezmeyi, tema değişkenlerini CSS'te kullanmayı açıklar.
• Tailwind @apply ve bileşen sınıfları: @apply ile bileşen sınıfı yazmayı, ne zaman tercih edileceğini ve @reference kullanımını gösterir.
• Tailwind @utility direktifi: Kendi basit ve değer alan utility sınıflarınızı tanımlamayı öğretir.
• Tailwind custom variant ve keyfi varyant: @custom-variant, keyfi seçici varyantları ve data-*, aria-* varyantlarını anlatır.
• Tailwind --spacing() ve --alpha() fonksiyonları: CSS içinde kullanılan Tailwind fonksiyonlarını ve eski uyumluluk direktiflerini açıklar.

8. Mimari, kalıplar ve sık hatalar

Son bölüm, öğrendiklerinizi gerçek projelerde düzenli tutmanın yollarını ve en sık karşılaşılan sorunların çözümlerini toplar.

• Tailwind layer katmanları: Katman sırasını, kendi CSS'inizi nereye yazacağınızı, önek ve important seçeneklerini anlatır.
• Tailwind çakışan sınıflar ve important: Aynı özelliği yazan iki sınıftan hangisinin kazandığını ve ! modifier'ının ne zaman gerektiğini açıklar.
• Tailwind kart, buton ve input örnekleri: Sık kullanılan arayüz parçalarını durum varyantlarıyla birlikte tam örnekler halinde verir.
• Tailwind sayfa düzeni: Yapışkan üst bilgi, kenar çubuğu, alta itilen alt bilgi ve responsive sayfa iskeleti kurmayı gösterir.
• Tailwind erişilebilirlik: Ekran okuyucu sınıflarını, klavye odak halkalarını, hareket azaltma ve forced-colors varyantlarını anlatır.
• Tailwind class çalışmıyor: sık hatalar: Üretilmeyen sınıflar, @apply hataları, eski sınıf adları ve dokunmatik ekranda hover gibi sorunların nedenlerini ve çözümlerini toplar.

Bu seriyi nasıl kullanmalı?

Yazılar bağımsız okunabilecek şekilde yazıldı, ama yukarıdaki sıra bilinçli seçildi. İlk bölüm olmadan sonraki yazılardaki derleme çıktılarını okumak zorlaşır; çünkü calc(var(--spacing) * 4) gibi ifadelerin, kaçışlı seçicilerin ve katmanların ne anlama geldiği orada anlatılır. İkinci ve üçüncü bölüm birlikte sayfa düzeninin temelini oluşturur. Dördüncü bölümden itibaren konular daha bağımsızdır; projenizin ihtiyacına göre sıra değiştirebilirsiniz.

Her yazıdaki örnekleri kendiniz denemenin en kolay yolu, standalone CLI ile küçük bir klasörde giris.css ve ornek.html dosyası oluşturup derlemektir. @source inline("...") ile HTML dosyası bile gerekmeden belirli sınıfların ürettiği CSS'i görebilirsiniz. Gösterilen çıktılar v4.3.5'e aittir; farklı bir sürümde ayrıntılar değişebilir, bu yüzden kendi derlemenizi her zaman nihai kaynak kabul edin.

Bir sınıf beklediğiniz gibi çalışmadığında, sorunun büyük kısmı üç yerden birinde çıkar: sınıf hiç üretilmemiştir (tarama ya da yazım hatası), üretilmiş ama başka bir kural tarafından ezilmiştir (katman ya da çakışma) veya üretilen değer beklediğiniz değil (tema ya da keyfi değer). Derlenmiş CSS'te sınıfın seçicisini aramak, bu üç olasılığı birkaç saniyede ayırmanızı sağlar. Bu ayrımın ayrıntıları sık hatalar yazısında toplanmıştır.

Sık Sorulan Sorular

Tailwind öğrenmek için önce CSS bilmem gerekir mi?

Tailwind sınıfları CSS özelliklerine birebir karşılık geldiği için temel CSS bilgisi büyük kolaylık sağlar. Bu seri sınıfları anlatır, kavramların saf CSS tarafı için CSS serisindeki yazılara bağlantı verir.

Seri hangi Tailwind sürümünü anlatıyor?

Bütün örnekler Tailwind CSS v4.3.5 standalone CLI ile derlendi. Sözdizimi v4'e aittir; v3 farkları için v4 yenilikleri yazısına bakabilirsiniz.

Kurulum için Node.js şart mı?

Hayır. Standalone CLI tek bir çalıştırılabilir dosyadır ve Node gerektirmez. Vite, PostCSS ve npm CLI yolları ise Node ister; seçenekler temeller bölümündeki kurulum yazısında karşılaştırılır.

Kullanmadığım sınıflar sayfamı yavaşlatır mı?

Derleyici yalnızca kaynaklarınızda geçen sınıflar için CSS ürettiğinden kullanılmayan sınıflar çıktıya girmez. Yukarıdaki örnekte beş sınıf kullanıldı ve utilities katmanında yalnızca beş kural oluştu.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Utility class mantığı · Standalone CLI · Sınıf tarama ve @source · Tailwind CSS sıfırdan rehber · CSS öğrenme rehberi