← Blog
Web Gelistirme7 dk okumaMegis

Tailwind CSS Rehberi: Utility-First CSS Framework

Tailwind CSS ile hizli ve tutarli UI tasarimlari yaparak gelistirme surecinizi hizlandirin.

Tailwind CSS Nedir?

Tailwind CSS, utility-first (yardimci sinif oncelikli) yaklasimini benimseyen modern bir CSS framework'udur. Geleneksel CSS framework'lerinin aksine, onceden tanimlanmis bilesenler sunmak yerine dusuk seviyeli yardimci siniflar (utility classes) saglar. Bu siniflar, HTML icerisinde dogrudan stil uygulamaniza olanak tanir ve son derece hizli bir gelistirme deneyimi sunar.

2024'te yayimlanan Tailwind CSS v4, performans, yapilandirma ve yeni ozellikler acisindan buyuk ilerlemeler kaydetmistir. Bu rehberde Tailwind CSS'in temellerinden ileri duzey kullanimina kadar her seyi ele alacagiz.

Utility-First Yaklasiminin Avantajlari

Utility-first yaklasimi, geleneksel CSS yazim yontemlerinden farkli bir felsefe benimser. Avantajlari sunlardir:

  • Hizli gelistirme: CSS dosyalari arasinda gecis yapmadan, dogrudan HTML uzerinde stil uygulaayin. Gelistirme hizi onemli olcude artar.
  • Tutarli tasarim: Onceden tanimlanmis araliklar, renkler ve boyutlar sayesinde tasarim sistemi otomatik olarak tutarli kalir.
  • Kucuk dosya boyutu: Kullanilmayan siniflar uretim derlemesinde otomatik olarak kaldirilir (tree-shaking). Sonuc CSS dosyasi genellikle 10-30 KB arasinda olur.
  • Bakim kolayligi: Stiller bilesenle birlikte yasadigindan, bir bileseni sildiginizde ilgili stiller de gider. Olum CSS sorunu ortadan kalkar.
  • Esnek ozellestirme: Her proje icin tasarim tokenlarini (renkler, fontlar, araliklar) kolayca ozellestirebilirsiniz.

Tailwind CSS Kurulumu

Tailwind CSS v4, onceki surumlerden farkli olarak CSS-first yapilandirma kullanir. Kurulum islemi su adimlari icerir:

# Next.js projesi icin kurulum
npm install tailwindcss @tailwindcss/postcss

# postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {}
  }
};

# CSS dosyaniza ekleyin
@import "tailwindcss";

Tailwind CSS v4 ile yapilandirma artik CSS dosyasi uzerinden yapilir. tailwind.config.js dosyasina gerek kalmadan, CSS icinde @theme direktifi ile tasarim tokenlarinizi tanimlayabilirsiniz.

Temel Utility Siniflari

Tailwind CSS'in temel yardimci siniflari, CSS ozelliklerinin kisaltilmis halleridir. En sik kullanilan kategoriler:

Layout ve Flexbox

<!-- Flex container -->
<div class="flex items-center justify-between gap-4">
  <div class="flex-1">Sol</div>
  <div class="flex-shrink-0">Sag</div>
</div>

<!-- Grid layout -->
<div class="grid grid-cols-3 gap-6">
  <div>Kolon 1</div>
  <div>Kolon 2</div>
  <div>Kolon 3</div>
</div>

Spacing (Bosluklar)

Tailwind'in spacing sistemi 4px tabanli bir olcek kullanir. p-4 = 16px padding, m-8 = 32px margin anlamina gelir. Yonlu bosluklar icin px (yatay padding), py (dikey padding), mt (ust margin), mb (alt margin) gibi kisaltmalar kullanilir.

Tipografi

<h1 class="text-4xl font-bold tracking-tight text-gray-900">
  Baslik
</h1>
<p class="text-lg leading-relaxed text-gray-600">
  Paragraf metni
</p>
<span class="text-sm font-medium uppercase tracking-wider">
  Etiket
</span>

Renkler

Tailwind, her renk icin 50-950 arasinda 11 ton sunar. bg-blue-500 arka plan rengi, text-blue-700 metin rengi, border-blue-200 cerceve rengi icin kullanilir. Opakligi kontrol etmek icin bg-blue-500/75 soz dizimi kullanabilirsiniz (yuzde 75 opaklik).

Responsive Tasarim

Tailwind CSS, mobile-first responsive yaklasimini benimser. Kirilma noktalari (breakpoints) on ek olarak uygulanir:

  • sm: — 640px ve ustu
  • md: — 768px ve ustu
  • lg: — 1024px ve ustu
  • xl: — 1280px ve ustu
  • 2xl: — 1536px ve ustu
<!-- Mobilde tek kolon, tablette 2, masaustunde 3 kolon -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Kartlar -->
</div>

<!-- Mobilde gizli, masaustunde gorunur -->
<nav class="hidden lg:flex">
  <!-- Navigasyon -->
</nav>

On ek olmayan siniflar tum ekran boyutlarinda gecerlidir. On ekli siniflar yalnizca belirtilen kirilma noktasindan itibaren uygulanir. Bu mobile-first yaklasim, once mobil tasarimi yazmanizi ve buyuk ekranlar icin uyarlamanizi saglar.

Dark Mode (Karanlik Mod)

Tailwind CSS, dark: on eki ile karanlik mod destegi sunar. Varsayilan olarak isletim sistemi tercihine gore calisir, ancak sinif tabanli gecise de yapilandirilabilir:

<!-- Aydinlik ve karanlik mod stilleri -->
<div class="bg-white dark:bg-gray-900">
  <h2 class="text-gray-900 dark:text-white">Baslik</h2>
  <p class="text-gray-600 dark:text-gray-300">Icerik</p>
</div>

<!-- Sinif tabanli gecis icin CSS yapilandirmasi -->
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));

Karanlik mod tasariminda dikkat edilmesi gereken noktalar: siyah (#000) yerine koyu gri tonlari kullanin, kontrastlarin WCAG standartlarini karsiladigindan emin olun ve gorsellerin karanlik modda uyumlu gorundugunuu test edin.

Bilesen Kaliplari ve @apply

Tekrar eden utility kombinasyonlarini birlestirmek icin birkac yaklasim vardir:

React Bilesenleri ile Soyutlama

// Button.tsx - Tailwind ile bilesen
function Button({ children, variant = 'primary' }) {
  const base = "px-6 py-3 rounded-xl font-semibold transition-all";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
    outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
  };
  return (
    <button className={`${base} ${variants[variant]}`}>
      {children}
    </button>
  );
}

@apply Direktifi

/* CSS dosyasinda bilesen sinifi */
.btn-primary {
  @apply px-6 py-3 rounded-xl font-semibold bg-blue-600
         text-white hover:bg-blue-700 transition-all;
}

/* Dikkat: @apply asiri kullanimi Tailwind'in
   avantajlarini ortadan kaldirir */

Genel oneri, React veya Vue gibi bilesen tabanli framework'lerde @apply yerine bilesen soyutlamasini tercih etmektir. @apply yalnizca global stiller veya ucuncu parti eklentileri stillenndirmek icin kullanilmalidir.

Tailwind CSS v4 Yenilikleri

Tailwind CSS v4, onemli iyilestirmeler getirir:

  • CSS-first yapilandirma: JavaScript yapilandirma dosyasi yerine CSS icinde @theme direktifi ile tasarim tokenlari tanimlanir.
  • Oxide motoru: Rust ile yazilmis yeni motor, onceki surume gore 10 kata kadar daha hizli derleme sunar.
  • Otomatik icerik algilama: content yapilandirmasina gerek kalmadan, projenizdeki dosyalar otomatik taranir.
  • Container Queries: @container destegi ile bilesen bazli responsive tasarim yapabilirsiniz.
  • 3D Transform destegi: rotate-x-45, perspective-500 gibi 3D donusum siniflari.
  • Yeni renk paleti: OKLCH renk uzayinda daha genis ve tutarli renk skalasi.

Performans Optimizasyonu

Tailwind CSS ile performansi en ust duzeye cikarmak icin su uygulamalari takip edin:

  • JIT (Just-In-Time) modu: Tailwind v4 varsayilan olarak JIT kullanir. Yalnizca kullandiginiz siniflar icin CSS uretir.
  • Dinamik sinif isimleri olusturmayin: text-red-500 gibi tam sinif ismini kullanin. JIT motoru yalnizca statik sinif isimlerini algilayabilir.
  • Eklentileri sinirlayin: Kullanmadiginiz eklentileri kaldirin. Her eklenti derleme suresini artirir.
  • CSS dosya boyutunu izleyin: Uretim derlemesinde CSS boyutunu kontrol edin. Tipik bir Tailwind projesi 10-30 KB gzip'li CSS uretir.

Tailwind CSS Ekosistemi

Tailwind CSS ekosisteminde faydali araclar ve eklentiler:

  • Tailwind UI: Resmi bilesen kutuphanesi. Yuzlerce uretim kalitesinde bilesen icerir.
  • Headless UI: Erisilebilir, stilsiz UI bilesenleri. Tailwind ile stillendirmek icin idealdir.
  • Heroicons: Tailwind ekibi tarafindan tasarlanan SVG ikon seti.
  • Prettier Plugin: Tailwind sinif siralamasini otomatik duzenler. Takim ici tutarlilik saglar.
  • VS Code IntelliSense: Otomatik tamamlama, on izleme ve hata tespiti sunan eklenti.
  • @tailwindcss/typography: Markdown icerik icin tipografik stiller. prose sinifi ile guzel metin gorunumu saglar.
  • @tailwindcss/forms: Form elemanlarini sifirlar ve temel stiller ekler.

Sonuc

Tailwind CSS, modern web gelistirmede verimlilik, tutarlilik ve performans saglayan guclu bir aractir. Utility-first yaklasimi basda yabanci gelebilir, ancak kisa surede gelistirme hizinizi onemli olcude arttirir. Responsive tasarim, karanlik mod, bilesen kaliplari ve v4'un yenilikleriyle Tailwind CSS, her olcekteki proje icin ideal bir secimdir. Tailwind CSS'i projelerinize entegre ederek modern, performansli ve bakimi kolay arayuzler olusturabilirsiniz.

#tailwind css#css framework#utility-first#ui tasarim