1. Kurulum ve Proje Yapılandırması

Modern web projelerinde utility-first yaklaşım hız kazandırır. Tailwind CSS doğrudan HTML içinde çalışır. CSS dosya boyutu küçük kalır.

Vite tabanlı kurulum adımları:

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 şablon yollarını tanımla:

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

src/style.css içine direktifleri ekle:

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

2. Modern Tasarım Trendleri ve Tema Ayarları

Dijital ajans projelerinde sık kullanılan arayüz trendleri:

Bento Grid: Kart tabanlı asimetrik modüler yerleşim.
Glassmorphism: Yarı saydam arka plan, backdrop-blur sınıfı.
Mikro Etkileşimler: transition-all duration-200 hover:scale-[1.02] gibi akıcı durumlar.

3. Adım Adım Bileşen Tasarımı: Hero ve Bento Kart

Sıfırdan modern hero alanı ve grid bileşeni kodu:

<section class="min-h-screen bg-slate-950 text-white p-8">
  <header class="max-w-6xl mx-auto py-12 text-center">
    <span class="text-xs font-semibold uppercase tracking-widest text-sky-400 bg-sky-950/60 px-3 py-1 rounded-full border border-sky-800">Rehber</span>
    <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mt-4">Hızlı Arayüz Mimarisi</h1>
    <p class="mt-4 text-slate-400 max-w-xl mx-auto">Temiz, optimize ve performans odaklı web tasarımı.</p>
  </header>

  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="md:col-span-2 p-6 rounded-2xl bg-slate-900/50 border border-slate-800 backdrop-blur hover:border-slate-700 transition">
      <h2 class="text-xl font-bold mb-2">Performans Odaklı CSS</h2>
      <p class="text-slate-400 text-sm leading-relaxed">Kullanılmayan stiller derleme anında temizlenir. Boyut minimum düzeyde kalır.</p>
    </div>
    <div class="p-6 rounded-2xl bg-gradient-to-br from-sky-500 to-indigo-600 text-white">
      <h2 class="text-xl font-bold mb-2">Hızlı Prototip</h2>
      <p class="text-sky-100 text-sm leading-relaxed">Sınıfları doğrudan elemana bağla. CSS dosyaları arasında kaybolma.</p>
    </div>
  </div>
</section>

4. Optimizasyon ve En İyi Pratikler

@apply Kötüye Kullanımı: Her şeyi @apply ile CSS dosyasına taşımak utility mantığını bozar. Sadece çok tekrar eden ilkel bileşenlerde (buton, input) kullan.
JIT (Just-In-Time) Avantajı: İhtiyaç duyulan sınıflar anında üretilir. w-[342px] gibi rastgele değerleri sınırla, tema değerlerine sadık kal.
Erişilebilirlik (a11y): focus-visible:ring-2 focus-visible:ring-sky-400 odak stillerini asla kaldırma.

Özet: Tailwind CSS hız kazandırır. Gereksiz soyutlamalardan kaçın. Tasarım sistemini tailwind.config.js üzerinde tutarlı kur.