Tailwind CSS Nedir ve Neden Standart Oldu?

Tailwind CSS, utility-first (işlev odaklı) CSS frameworküdür. Doğrudan HTML içinde stil sınıfları kullanarak çalışır. Geleneksel CSS dosyaları yazma ve adlandırma yükünü ortadan kaldırır. Dijital ajans iş akışlarında hız ve tutarlılık sağlar.

Sıfır CSS Şişkinliği: JIT (Just-in-Time) derleyici sadece kullanılan sınıfları derler. Nihai dosya boyutu genelde 10kb altında kalır.
Tasarım Sistemi Standardı: Spacing, renk ve tipografi ölçekleri tutarlıdır.
Bakım Kolaylığı: HTML silindiğinde stil de otomatik silinir; ölü kod birikmez.

Adım 1: Proje Kurulumu ve Yapılandırma

Modern web projelerinde en hızlı kurulum Vite ile yapılır.

npm create vite@latest modern-ui -- --template vanilla
cd modern-ui
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js dosyasında içerik yollarını belirtin:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: '#0f172a',
        accent: '#38bdf8',
      }
    },
  },
  plugins: [],
}

Ana CSS dosyasına çekirdek direktifleri ekleyin (style.css):

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

Adım 2: Modern Web Trendleri ile Bileşen Tasarımı

Modern arayüz trendlerinde minimalizm, yumuşak gölgeler ve glassmorphism (buzlu cam efekti) öne çıkar.

Örnek Kart Bileşeni (Card Component)

<div class="max-w-sm p-6 bg-white/80 backdrop-blur-md rounded-2xl border border-slate-200/50 shadow-xl transition-transform hover:-translate-y-1">
  <span class="px-3 py-1 text-xs font-semibold text-sky-600 bg-sky-50 rounded-full">Yeni Trend</span>
  <h3 class="mt-4 text-xl font-bold text-slate-900">Modern UI Mimarisi</h3>
  <p class="mt-2 text-slate-600 text-sm">Tailwind utility sınıfları ile hızlı prototip ve üretim seviyesinde temiz kod.</p>
  <button class="mt-4 w-full py-2 px-4 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800 transition-colors">
    Detayları Gör
  </button>
</div>

Adım 3: Mobil Öncelikli (Mobile-First) Responsive Düzen

Tailwind varsayılan olarak mobile-first çalışır. Önce mobil boyut yazılır, kırılma noktaları (breakpoints) sonra eklenir.

sm: 640px ve üzeri
md: 768px ve üzeri
lg: 1024px ve üzeri
xl: 1280px ve üzeri

Responsive Grid Yapısı

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
  <div class="p-4 bg-slate-100 rounded-lg">Öğe 1</div>
  <div class="p-4 bg-slate-100 rounded-lg">Öğe 2</div>
  <div class="p-4 bg-slate-100 rounded-lg">Öğe 3</div>
</div>

Adım 4: Dark Mode Entegrasyonu

Dijital ajans projelerinde standart özellik: Gece modu. Tailwind'de class stratejisi ile yönetilir.

tailwind.config.js içine ekleyin: darkMode: 'class'

Kullanımı:

<div class="bg-white dark:bg-slate-950 text-slate-900 dark:text-white p-6 rounded-lg">
  <p>Dark mode otomatik adapte olur.</p>
</div>

Adım 5: Production Optimizasyonu

Purge CSS: Config içindeki content alanı eksiksiz olmalı. Kullanılmayan sınıflar derleme dışı kalır.
@apply Kötüye Kullanımı: @apply direktifini gereksiz kullanmayın. Utility sınıflarını doğrudan HTML/JSX içinde bırakın. Yeniden kullanılabilirlik için framework bileşenleri (React, Vue) tercih edin.
Minification: Production build çalıştığında CSS optimize edilir: npm run build

Özet En İyi Pratikler

Gereksiz custom CSS yazmayın; config theme.extend kullanın.
Karmaşık gridler yerine basit Flexbox ve Grid utility'lerini birleştirin.
Erişilebilirlik için focus:ring durumlarını atlamayın.