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

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

No-Code / Low-Code Platformlar

HTTPS ve SSL Nedir başlığını temsil eden, kilit simgesi veya güvenli bağlantıyı işaret eden sertifika görseli

HTTPS ve SSL 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?

Vue.js logosu ve Composition API kod örneği gösteren görsel

Vue.js 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?

Google arama sonuçlarında 1. sırada çıkan bir web sitesi, yeşil URL ve yıldızlı snippet gösteren ekran görüntüsü

Google’da İlk Sayfaya Çıkmak

E-A-T ve YMYL Nedir başlığını temsil eden, uzmanlık, otorite ve güvenilirlik simgeleriyle desteklenmiş bir kalite mührü görseli

E-A-T ve YMYL Nedir?

Hosting Nedir başlığını temsil eden, sunucu odasını veya bir web sitesinin barındırılmasını simgeleyen illüstrasyon

Hosting 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?

Domain Nedir başlığını temsil eden, bir web adresi çubuğu veya alan adı kavramını gösteren görsel

Domain Nedir?

Agile döngüsünü ve Scrum ritüellerini gösteren infografik

Agile & Scrum Nedir?

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

Mobil Uyumlu Web Sitesi Neden Zorunlu?

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

Nuxt.js Nedir?

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

Google Analytics Nedir?

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?

API Nedir başlığını temsil eden, farklı uygulamaların birbiriyle iletişimini gösteren bağlantı noktası illüstrasyonu

API Nedir?

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 Nedir?

Web Components yapısını ve Shadow DOM kapsüllemesini gösteren şema

Web Components Nedir?

Telefonla QR kod taratılırken dijital restoran menüsü ekranı

QR Menü Nedir?

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

JavaScript 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?

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?

Docker logosu ve konteyner mimarisini gösteren şematik görsel

Docker Nedir?

Page Speed Optimization Nedir başlığını temsil eden, hızlı yükleme ve web performansını simgeleyen hız göstergesi

Page Speed Optimization Nedir?

PostgreSQL logosu ve ilişkisel veritabanı şeması örneği

PostgreSQL Nedir?

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

Local SEO Nedir?

Jamstack Mimarisi Nedir başlığını temsil eden, JavaScript, API ve Markup katmanlarını birbirine bağlayan üçgen şema ve CDN globe ikonu

Jamstack Mimarisi Nedir?

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

CMS Nedir?

SvelteKit logosu ve dosya tabanlı routing yapısını gösteren ekran görüntüsü

SvelteKit Nedir?

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

GraphQL Nedir?

Express.js logosu ve basit bir API route örneği gösteren ekran görüntüsü

Express.js Nedir?

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?

UI (buton, renk) ve UX (kullanıcı yol haritası) kavramlarını yan yana gösteren illüstrasyon

UI/UX Tasarım Nedir?

Core Web Vitals Nedir başlığını temsil eden, LCP, FID, CLS metriklerini ve hızlı yüklenen bir sayfa gösteren görsel

Core Web Vitals Nedir?

Angular logosu ve component yapısını gösteren ekran görüntüsü

Angular Nedir?

Web Araçları

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

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

CSS Oluşturucu

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

Web TasarımÜcretsiz

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

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

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

Renk Seçici

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

Web TasarımAraç

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