Modern Web Geliştirmede Tailwind CSS

Tailwind CSS, utility-first CSS kütüphanesidir. CSS dosyasına gitmeden HTML içinde doğrudan stil verme imkanı sağlar. Dijital ajans projelerinde hız, tutarlı tasarım sistemi ve küçük dosya boyutu avantajı sunar.

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

Vite ile en yalın kurulum adımları:

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

Yapılandırma dosyasında şablon yollarını tanımlayın:

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ana stil dosyasına direktifleri ekleyin (style.css):

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

Adım 2: Modern Hero Bileşeni Tasarımı

Son trendler doğrultusunda flexbox, grid ve modern tipografi sınıfları kullanarak landing page hero alanı:

<section class="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6">
  <div class="max-w-4xl text-center space-y-6">
    <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
      Modern Web Arayüzleri
    </h1>
    <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto">
      Tailwind CSS ile hızlı, performanslı ve responsive bileşenler üretin.
    </p>
    <div class="flex gap-4 justify-center">
      <button class="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 font-medium transition">Başla</button>
      <button class="px-6 py-3 rounded-lg border border-slate-700 hover:bg-slate-800 transition">Dokümantasyon</button>
    </div>
  </div>
</section>

Adım 3: Responsive ve Mobil Uyum

Mobil öncelikli (mobile-first) breakpoint kullanımı gereklidir:

sm: 640px üzeri ekranlar
md: 768px üzeri ekranlar (tabletler)
lg: 1024px üzeri ekranlar (masaüstü)
xl: 1280px ve üzeri

Örnek: class="w-full md:w-1/2 lg:w-1/3" mobil cihazda tam genişlik, tablette yarı genişlik, masaüstünde 3 sütun düzeni sağlar.

Adım 4: Performans ve Production Optimizasyonu

Tailwind CSS derleme aşamasında (PurgeCSS motoru sayesinde) sadece kullanılan sınıfları nihai CSS paketine ekler. Kullanılmayan sınıflar ayıklanır. Nihai CSS boyutu ortalama 10-15 KB aralığında kalır.

npm run build

Üretim çıktısı optimize edilmiş, sıkıştırılmış statik dosyalar üretir.