Tailwind CSS: Kapsamlı Başlangıç Rehberi

Tailwind CSS: Kapsamlı Başlangıç Rehberi

Tailwind CSS, utility-first yaklaşımıyla geleneksel CSS yazım alışkanlıklarını kökten değiştiren bir framework'tür. Önceden tanımlanmış class'ları doğrudan HTML'de kullanarak, CSS dosyasına dokunmadan hızlı ve tutarlı arayüzler oluşturmanızı sağlar. Bu rehberde Tailwind CSS'in kurulumundan ileri seviye kullanımına kadar her şeyi adım adım keşfedeceğiz.

1. Kurulum ve Yapılandırma

Tailwind CSS v4, önceki sürümlere göre çok daha basit bir kurulum sürecine sahiptir. PostCSS eklentisi, CLI aracı veya framework entegrasyonlarıyla projenize ekleyebilirsiniz.

# Tailwind CSS v4 Kurulumu

# 1. npm ile kurulum
npm install tailwindcss @tailwindcss/cli

# 2. CSS dosyası oluşturma (src/input.css)
# @import "tailwindcss";

# 3. Build komutu
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

# Vite ile kurulum (önerilen)
npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

/* src/styles.css */
@import "tailwindcss";

/* Tailwind v4'te tailwind.config.js yerine CSS ile yapılandırma */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --breakpoint-xs: 480px;
}

2. Utility Class'ların Temelleri

Tailwind'in gücü, her CSS özelliği için önceden tanımlanmış utility class'larında yatar. Bu class'ları birleştirerek karmaşık düzenler oluşturabilirsiniz. İşte temel kategoriler ve en çok kullanılan class'lar:

<!-- Card Component — Utility Class'larla -->
<div class="max-w-sm rounded-xl shadow-lg overflow-hidden bg-white">
  <img
    src="/image.webp"
    alt="Proje görseli"
    class="w-full h-48 object-cover"
  />
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">
      Proje Başlığı
    </h3>
    <p class="text-gray-600 text-sm leading-relaxed mb-4">
      Proje açıklaması buraya gelecek. Tailwind ile hızlı
      ve tutarlı UI oluşturabilirsiniz.
    </p>
    <div class="flex items-center justify-between">
      <span class="text-xs text-gray-500 uppercase tracking-wide">
        CSS Framework
      </span>
      <button class="px-4 py-2 bg-blue-500 text-white text-sm
                     font-medium rounded-lg hover:bg-blue-600
                     transition-colors duration-200">
        Detay
      </button>
    </div>
  </div>
</div>

<!-- Flex Layout -->
<div class="flex items-center gap-4 p-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.webp" alt="" />
  <div class="flex-1 min-w-0">
    <p class="text-sm font-semibold text-gray-900 truncate">Tarik Tunç</p>
    <p class="text-xs text-gray-500">Frontend Developer</p>
  </div>
  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full
               text-xs font-medium bg-green-100 text-green-800">
    Aktif
  </span>
</div>

3. Hover, Focus ve State Varyantları

Tailwind, pseudo-class ve pseudo-element'ler için modifier (varyant) sistemi sunar. hover:, focus:, active: gibi öneklerle state bazlı stiller tanımlarsınız.

<!-- State Varyantları -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg
               font-medium
               hover:bg-blue-600
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
               active:bg-blue-700 active:scale-95
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-all duration-200">
  Gönder
</button>

<!-- Group hover — Parent hover'da child'ı stillendir -->
<div class="group cursor-pointer rounded-xl p-6 bg-white
            hover:bg-blue-500 transition-colors duration-300">
  <h3 class="text-lg font-bold text-gray-900
              group-hover:text-white transition-colors">
    Başlık
  </h3>
  <p class="text-gray-600
            group-hover:text-blue-100 transition-colors">
    Açıklama metni
  </p>
  <span class="inline-block mt-3 text-blue-500
               group-hover:text-white group-hover:translate-x-2
               transition-all">
    Devamını oku →
  </span>
</div>

<!-- Peer — Kardeş eleman etkileşimi -->
<div>
  <input type="email" class="peer border rounded px-3 py-2 w-full
                             focus:border-blue-500 invalid:border-red-500"
         placeholder="E-posta" required />
  <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">
    Geçerli bir e-posta girin.
  </p>
</div>

4. Spacing, Sizing ve Layout Sistemi

Tailwind'in spacing sistemi 4px (0.25rem) tabanlıdır. p-4 = 1rem, m-8 = 2rem gibi. Bu tutarlı ölçek, tasarımda harmonik boşluklar oluşturmanızı sağlar.

<!-- Spacing Örnekleri -->
<!-- p-{n}: padding, m-{n}: margin, gap-{n}: gap -->
<!-- 0=0, 1=0.25rem, 2=0.5rem, 4=1rem, 6=1.5rem, 8=2rem -->

<!-- Sayfa Layout'u -->
<div class="min-h-screen flex flex-col">
  <!-- Header -->
  <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md
                 border-b border-gray-200">
    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
                flex items-center justify-between h-16">
      <a href="/" class="text-xl font-bold">Logo</a>
      <div class="hidden md:flex items-center gap-8">
        <a href="#" class="text-gray-700 hover:text-blue-500">Ana Sayfa</a>
        <a href="#" class="text-gray-700 hover:text-blue-500">Blog</a>
        <a href="#" class="text-gray-700 hover:text-blue-500">Hakkımda</a>
      </div>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- Grid Card Layout -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card'lar buraya -->
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-gray-900 text-gray-400 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
                grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Footer içeriği -->
    </div>
  </footer>
</div>

Sonuç

Tailwind CSS, utility-first yaklaşımıyla geliştirme hızını artırır, tutarlı tasarım sistemi oluşturur ve kullanılmayan CSS'i otomatik olarak temizler. İlk bakışta "HTML'de çok fazla class var" gibi görünse de, pratikte component bazlı geliştirme ile mükemmel uyum sağlar. Spacing sistemi, state varyantları, responsive modifier'lar ve güçlü yapılandırma seçenekleriyle modern web projelerinin vazgeçilmez aracıdır. Başlangıçta cheat sheet kullanın, kısa sürede class isimlerini ezbere bileceksiniz.

Kaynaklar

• Tailwind CSS Official Docs
• Tailwind CSS Installation Guide
• Tailwind UI — Official Component Library
• Tailwind CSS Cheat Sheet