1. Kurulum ve Ortam Hazırlığı

Modern web projelerinde Tailwind CSS motorunu Vite ile ayağa kaldırın. En hızlı derleme süresi için 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ımlayın:

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: { 500: '#0ea5e9', 600: '#0284c7' }
      }
    }
  },
  plugins: []
}

2. Modern Web Trendleri ile Tasarım Mimarisi

Güncel dijital ajans projelerinde öne çıkan arayüz trendleri:

Bento Grid Layout: CSS Grid kullanarak modüler kart hiyerarşisi oluşturma.
Glassmorphism: backdrop-blur-md bg-white/10 border border-white/20 sınıflarıyla yarı saydam paneller.
Dark Mode: class tabanlı tema değişimi ve dark:bg-slate-900 adaptasyonu.

Tasarımda doğrudan keyfi piksel değerleri (ör. w-[137px]) kullanmayın. Tailwind spacing ölçeğine (w-36 vb.) bağlı kalın; tasarım tutarlılığı korunur.

3. Adım Adım Modern Bileşen Üretimi

Kart Bileşeni

<div class="max-w-sm rounded-2xl bg-white p-6 shadow-lg border border-slate-100 dark:bg-slate-800 dark:border-slate-700 transition hover:-translate-y-1 hover:shadow-xl">
  <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-brand-500/10 text-brand-600 dark:text-brand-500">Yeni</span>
  <h3 class="mt-4 text-xl font-bold text-slate-900 dark:text-white">Modern UI Mimarisi</h3>
  <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Hızlı, temiz ve ölçeklenebilir arayüz prototipleme teknikleri.</p>
  <button class="mt-4 w-full py-2.5 px-4 rounded-xl bg-brand-600 text-white font-medium hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/50">İncele</button>
</div>

4. Performans ve Üretim Optimizasyonu

JIT Engine: Kullanılmayan CSS sınıflarını otomatik temizler. Build boyutu < 15kb seviyesinde kalır.
Arbitrary Values: Sadece zorunlu durumlarda tek seferlik CSS değişkenleri için kullanın.
@apply Kötüye Kullanımı: @apply direktifini CSS dosyalarında aşırı kullanmaktan kaçının. Bileşen yapısını framework düzeyinde (React/Vue bileşenleri) izole edin.