Tailwind CSS ile Modern ve Hızlı Arayüz Tasarımı Rehberi

1. Giriş ve Kurulum

Tailwind CSS, utility-first yaklaşımıyla hızlı prototipleme ve hafif bundle boyutu sağlar. Dijital ajans işlerinde CSS dosyaları arasında kaybolmadan standart tasarım sistemi kurmayı kolaylaştırır.

Vite ile Proje Başlatma

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

Yapılandırma (tailwind.config.js)

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

CSS Girişi (src/style.css)

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

2. Utility-First Mantığı ve Modern Web Trendleri

Modern web projelerinde inline class yönetimi tekrarı önler. Bileşenleri ayırmak yerine composition pattern kullanılır.

• Typography: text-sm font-medium tracking-tight
• Spacing: Sabit 4px grid ölçeği (p-4 = 16px).
• Glassmorphism (Trend): bg-white/10 backdrop-blur-md border border-white/20

3. Responsive Grid ve Flexbox Mimarisi

Mobile-first yaklaşım zorunludur. Prefix olmadan mobil, prefix ile geniş ekran yönetilir.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div class="p-6 bg-slate-900 text-white rounded-xl shadow-lg">Kart 1</div>
  <div class="p-6 bg-slate-900 text-white rounded-xl shadow-lg">Kart 2</div>
  <div class="p-6 bg-slate-900 text-white rounded-xl shadow-lg">Kart 3</div>
  <div class="p-6 bg-slate-900 text-white rounded-xl shadow-lg">Kart 4</div>
</div>

4. Koyu Mod (Dark Mode) Stratejisi

Sistem tercihi veya manuel class ile dark mode kontrolü.

Yapılandırma

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

Kullanım

<body class="bg-white text-black dark:bg-slate-950 dark:text-white">
  <!-- Arayüz içeriği -->
</body>

5. Performans ve Optimizasyon

Dijital ajans standartlarında core web vitals puanı kritik. Tailwind CSS JIT (Just-In-Time) motoru sadece kullanılan class'ları derler.

• Arbitrary Values: Sık kullanılmamalı. w-[347px] yerine config theme genişletilmeli.
• @apply Kötüye Kullanımı: @apply CSS dosyasını büyütür. Mecbur kalmadıkça doğrudan HTML içinde tutulmalı.
• Minification: Production build ile bundle ~10KB altına iner: npm run build

Rehber kuralı: Erken soyutlama yapma. Sınıfları yalnızca 3'ten fazla yerde tekrar ediyorsa bileşen haline getir.