sitetasarimtr_logo
Yükleniyor

Bilgi Merkezi / Tailwind CSS

Tailwind CSS Nedir? Utility-First CSS Framework Rehberi

Giriş

Tailwind CSS, modern web geliştirme dünyasında hızla popülerlik kazanan bir utility-first CSS framework'üdür.

Geleneksel CSS framework'lerinden (Bootstrap, Foundation) farklı olarak, önceden tasarlanmış component'ler sunmak yerine, low-level utility class'ları sağlar. Bu rehberde Tailwind CSS'in temellerini, avantajlarını, kurulumunu ve gerçek dünya kullanım örneklerini inceleyeceğiz.

Tailwind CSS Nedir?

Tailwind CSS, HTML'inizi özel CSS yazmadan hızlıca stilize etmenizi sağlayan bir CSS framework'üdür. Temel özellikleri:

  • Utility-First Yaklaşım: Önceden tanımlanmış küçük, tek amaçlı class'lar
  • Responsive Tasarım: sm:, md:, lg:, xl: prefix'leri
  • Customization: tailwind.config.js ile tam özelleştirme
  • Performance: Kullanılmayan stilleri otomatik temizleme
Tailwind CSS Nedir başlığını temsil eden, Tailwind logosu ve utility class yapısını gösteren kod örneği görseli

Tailwind CSS: Utility-First Framework

Neden Tailwind CSS Kullanmalı?

1. Hızlı Geliştirme

CSS dosyaları arasında geçiş yapmadan, doğrudan HTML'de stil oluşturabilirsiniz.

Örnek: <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Tıkla</button>

2. Tutarlı Tasarım Sistemi

Önceden tanımlanmış spacing, renk ve tipografi scale'leri sayesinde tutarlı arayüzler.

3. Responsive Tasarım Kolaylığı

Breakpoint prefix'leri ile kolay responsive geliştirme.

Örnek: <div class="w-full md:w-1/2 lg:w-1/3">Responsive div</div>

Tailwind CSS Kurulumu

1. CDN ile Hızlı Başlangıç

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Merhaba Tailwind!</h1>
</body>
</html>

2. NPM ile Profesyonel Kurulum

npm install -D tailwindcss
npx tailwindcss init

Temel Tailwind CSS Class'ları

Spacing

  • m-4 - margin: 1rem
  • p-4 - padding: 1rem
  • mt-2 - margin-top: 0.5rem
  • px-4 - padding-left/right: 1rem

Colors

  • bg-blue-500 - arkaplan rengi
  • text-white - metin rengi
  • border-gray-300 - border rengi
  • hover:bg-blue-700 - hover durumu

Typography

  • text-xl - font-size: 1.25rem
  • font-bold - font-weight: bold
  • text-center - text-align: center
  • uppercase - text-transform

Layout

  • flex - display: flex
  • grid - display: grid
  • hidden - display: none
  • w-1/2 - width: 50%

Gerçek Dünya Örnekleri

Kart Bileşeni

Tailwind CSS Kart

Bu bir Tailwind CSS kart örneğidir. Utility class'lar ile hızlıca oluşturuldu.

#tailwind#css
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Tailwind CSS Kart</div>
    <p class="text-gray-700 text-base">
      Bu bir Tailwind CSS kart örneğidir.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#tailwind</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#css</span>
  </div>
</div>

Tailwind CSS vs Geleneksel CSS

Özellik
Tailwind CSS
Bootstrap
Yaklaşım Utility-First Component-Based
ÖzelleştirmeTam özelleştirilebilirSASS değişkenleri ile
Bundle Boyutu Küçük (PurgeCSS) Büyük
Öğrenme Eğrisi Utility class'ları öğrenme Component'leri öğrenme
Tasarım Özgürlüğü Sınırsız Kısıtlı

En İyi Uygulamalar

  1. @apply direktifi ile tekrar eden utility'leri component'lere dönüştürün
  2. tailwind.config.js ile design token'larınızı özelleştirin
  3. Production build'de PurgeCSS kullanın
  4. Responsive prefix'leri akıllıca kullanın
  5. Dark mode desteği için dark: prefix'ini kullanın
  6. Custom component'ler için plugin'ler yazın
  7. JIT (Just-in-Time) mode'unu aktif edin

Sıkça Sorulan Sorular (FAQ)

Tailwind CSS öğrenmek zor mu?

Başlangıçta utility class'ları öğrenmek zaman alabilir, ancak bir kez alıştıktan sonra geliştirme hızınız önemli ölçüde artar.

Tailwind CSS performanslı mı?

Evet, PurgeCSS ile kullanılmayan stiller otomatik olarak temizlenir ve küçük bundle boyutları elde edilir.

Bootstrap yerine Tailwind kullanmalı mıyım?

Bootstrap hızlı prototipleme için iyidir, Tailwind ise tam özelleştirme ve benzersiz tasarımlar için idealdir. Proje ihtiyaçlarınıza göre seçim yapın.

Sonuç

Tailwind CSS, modern web geliştirme için güçlü ve esnek bir araçtır. Utility-first yaklaşımı, geliştiricilere hızlı prototipleme, tutarlı tasarım sistemleri ve kolay responsive geliştirme imkanı sunar.

Site Tasarım TR olarak, Tailwind CSS ile modern, performanslı ve ölçeklenebilir web arayüzleri geliştiriyoruz. Projelerinizde Tailwind CSS kullanmak için bize ulaşın.

Diğer İçerikler

Git Versiyon Kontrol Nedir başlığını temsil eden, branch ağacı ve terminal ekranında Git komutlarını gösteren görsel

Git Versiyon Kontrol Nedir?

Websitesi Nedir başlığını temsil eden, farklı web sitesi türlerini ve yapım aşamalarını gösteren grafik

Websitesi Nedir?

Frontend vs Backend Nedir başlığını temsil eden, ön yüz (tasarım) ve arka yüz (sunucu) arasındaki farkı gösteren şematik görsel

Frontend vs Backend Nedir?

Local SEO ve Google İşletme Profili optimizasyonunu gösteren, harita üzerinde bir işletmenin birinci sırada çıktığı görsel

Local SEO Nedir?

Google Analytics Nedir başlığını temsil eden, web trafiği analizlerini ve raporlama verilerini gösteren grafikler

Google Analytics Nedir?

Browser Cache Nedir başlığını temsil eden, tarayıcıda önbellek mekanizmasını gösteren illüstrasyon

Browser Cache Nedir?

MongoDB logosu ve koleksiyon/doküman yapısını gösteren görsel

MongoDB Nedir?

TypeScript logosu ve tip tanımlama kod örneği gösteren görsel

TypeScript Nedir?

Mikrofon simgesi ve ses dalgalarıyla çalışan voice arayüzü gösteren modern görsel

Voice UI ve Sesli Arama Optimizasyonu

Web Accessibility Nedir başlığını temsil eden, tüm kullanıcıların (engelli, yaşlı vb.) internete erişimini simgeleyen görsel

Web Accessibility Nedir?

NestJS logosu ve modüler yapı şeması

NestJS Nedir?

Web Tasarım Nedir başlığını temsil eden, kullanıcı deneyimi ve tasarım trendlerini simgeleyen, yaratıcı bir görsel

Web Tasarım Nedir?

Vite logosu ve hızlı sunucu başlatma süresini gösteren performans karşılaştırması

Vite Nedir?

Remix logosu ve nested routing yapısını gösteren diyagram

Remix.run Nedir?

Backlink Nedir başlığını temsil eden, bir web sitesinden diğerine giden bağlantı akışını gösteren illüstrasyon

Backlink Nedir?

URL Structure Nedir başlığını temsil eden, temiz ve SEO dostu bir URL yapısını gösteren örnek

URL Structure Nedir?

Google AI Overview ekranında birinci sırada çıkan kaynak kutusu, Gemini ve SGE sonuçlarında öne çıkan içerik örneği

AI Search Optimization (AIO) Nedir?

Sürükle-bırak arayüzüyle no-code web sitesi oluşturan ekran görüntüsü

No-Code / Low-Code Platformlar

Headless CMS Nedir başlığını temsil eden, içerik deposu ile farklı cihazlara (web, mobil, IoT) API üzerinden içerik dağıtımını gösteren şema

Headless CMS Nedir?

Google Mobile-Friendly Test ekranı ve mobil cihazlarda bozuk site örneği

Mobil Uyumlu Web Sitesi Neden Zorunlu?

Yeşil yapraklar ve enerji tasarrufu simgeleriyle sürdürülebilir web sitesini temsil eden illüstrasyon

Sürdürülebilir Web Tasarımı

Nuxt.js logosu ve pages klasörü yapısını gösteren klasik ekran görüntüsü

Nuxt.js Nedir?

GraphQL logosu ve tek endpoint üzerinden sorgu yapısını gösteren görsel

GraphQL Nedir?

Web sayfasında yumuşak geçişli mikro animasyonlar ve hover efektleri gösteren dinamik görsel

Motion UI ve Mikro Animasyonlar

Google arama çubuğunda "site:sitetasarimtr.com" yazıldığında sonuç çıkmayan ekran, yanında kırmızı uyarı ve düzeltme butonu

Web Siteniz Google’da Görünmüyor mu?

Next.js logosu ve pages klasörü yapısını gösteren klasik ekran görüntüsü

Next.js Nedir?

Keyword Research Nedir başlığını temsil eden, büyüteçle anahtar kelime veya arama kutusu inceleyen bir illüstrasyon

Keyword Research Nedir?

JavaScript Nedir başlığını temsil eden, dinamik web içeriği ve programlama fonksiyonlarını gösteren illüstrasyon

JavaScript Nedir?

Web tarayıcısında 3D ürün modeli döndürülen ve AR ile mobilyanın odada görüntülendiği örnek

3D ve AR Web Deneyimleri

Zero-Click Searches ve Featured Snippets başlığını temsil eden, Google SERP’te öne çıkan kutu (featured snippet) ve PAA sorularını gösteren ekran görüntüsü

Zero-Click Searches ve Featured Snippets Nedir?

CDN Nedir başlığını temsil eden, dünya üzerinde dağıtılmış sunucu noktalarını gösteren şematik görsel

CDN Nedir?

CMS Nedir başlığını temsil eden, içerik yönetim sistemlerini ve platformlarını (WordPress, Joomla) simgeleyen görsel

CMS Nedir?

Meta Tags Nedir başlığını temsil eden, arama motoru sonuç sayfasındaki başlık ve açıklama (meta) etiketlerini gösteren görsel

Meta Tags Nedir?

Hızlı yüklenen bir web sitesi, yeşil PageSpeed skoru ve Core Web Vitals 100/100 gösteren ekran görüntüsü

Web Siteniz 3 Saniyeden Yavaş mı?

WebAssembly performans karşılaştırması gösteren grafik ve tarayıcıda native hızda çalışan uygulama illüstrasyonu

WebAssembly Nedir?

Web Araçları

Güçlü Şifre Oluşturucu

Anında rastgele ve çok güçlü şifreler üretin. Uzunluk, büyük/küçük harf, rakam, sembol ayarları + kendi şifrenizi test etme özelliği.

GüvenlikGüvenlik

Renk Seçici

Web tasarımlarınız için renk paletleri oluşturun ve HEX, RGB kodlarını alın.

Web TasarımAraç

QR Kod Oluşturucu

URL, Wi-Fi, vCard, metin gibi verilerinizi saniyeler içinde özelleştirilebilir QR koda çevirin. Logo, renk ve SVG/PNG indirme desteği.

QR & PaylaşımPopüler

Resim Format Dönüştürücü

PNG → JPG, JPG → PNG, WEBP → JPG/PNG, HEIC → JPG gibi en popüler formatlar arasında saniyeler içinde dönüşüm yapın. Kalite ayarı, toplu işlem desteği ve tamamen tarayıcıda – indirme olmadan!

MultimedyaPopüler

PDF Birleştirici

Birden fazla PDF dosyasını tek bir PDF’de birleştirin. Sıra değiştirme, önizleme ve yüksek kaliteli çıktı desteği. Tarayıcıda, hızlı ve ücretsiz!

PDF & DokümanFavori

Alarm Saati & Hatırlatıcı

Tarayıcınızda saniyeler içinde alarm kurun. Sabah uyanma, toplantı hatırlatması, mola zamanı veya "yatma vakti" için ideal. Birden fazla alarm, özelleştirilebilir sesler, bildirim desteği ve kolay erteleme.

Günlük VerimlilikHer Gün Kullan

PDF Ayırıcı (Sayfa Bölme)

Tek PDF dosyasını istediğiniz sayfalara ayırın. Belirli sayfaları seçin veya aralık belirleyin, saniyeler içinde yeni PDF’ler oluşturun – tamamen tarayıcıda!

PDF & DokümanYeni

Emoji Seçici

1800+ Unicode emoji ile web tasarımlarınıza duygusal ifadeler ekleyin. Arama, kategori filtreleme ve 5 favori grubu.

Emoji & İçerikÜcretsiz

Ücretsiz Fotoğraf Düzenleyici

Tarayıcıda profesyonel fotoğraf düzenleme. Parlaklık, kontrast, doygunluk, sıcaklık, netlik, vignette ve 10+ hazır filtre ile Lightroom benzeri deneyim. Hiç indirme gerekmez, tamamen ücretsiz!

MultimedyaYeni

CSS Oluşturucu

CSS kodlarınızı otomatik oluşturun: gölgeler, gradyanlar ve daha fazlası.

Web TasarımÜcretsiz