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

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?

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

Local SEO Nedir?

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?

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?

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

Express.js Nedir?

Schema Markup Nedir başlığını temsil eden, JSON-LD kod blokları ve arama sonuçlarında çıkan yıldızlı snippet örneği

Schema Markup 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?

Responsive Design Nedir başlığını temsil eden, farklı cihazlarda (telefon, tablet, masaüstü) uyumlu gösterilen bir web sitesi görseli

Responsive Design 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?

CI/CD pipeline akış şeması (commit, test, build, deploy)

CI/CD Nedir?

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

Domain Nedir?

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

Vue.js Nedir?

Sitemap Nedir başlığını temsil eden, bir web sitesinin haritasını ve XML kod yapısını gösteren görsel

Sitemap Nedir?

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

Voice UI ve Sesli Arama Optimizasyonu

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

CDN Nedir?

HTTP/3 ve QUIC protokolünün veri aktarım akışını gösteren şematik görsel

HTTP/3 ve QUIC Nedir?

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

TypeScript Nedir?

Edge network üzerinde çalışan server-first mimari şeması ve CDN globe ikonu

Server-First ve Edge Rendering

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

Next.js Nedir?

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

Angular Nedir?

Node.js logosu ve sunucu mimarisini gösteren şema

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

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

Agile & Scrum Nedir?

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

API Nedir?

Lazy Loading Nedir başlığını temsil eden, yavaş yavaş yüklenen görsel katmanlarını gösteren illüstrasyon

Lazy Loading 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?

Astro logosu ve island architecture şeması gösteren görsel

Astro Nedir?

SEO Nedir başlığını temsil eden, arama motoru optimizasyonu kavramını ve stratejilerini gösteren illüstrasyon

SEO Nedir?

Robots.txt Nedir başlığını temsil eden, arama motoru botlarının (robot) erişimini gösteren bir illüstrasyon

Robots.txt 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?

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

SvelteKit Nedir?

CSS Nedir başlığını temsil eden, renk paletleri ve tasarım kurallarını (Cascading Style Sheets) simgeleyen görsel

CSS Nedir?

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

URL Structure Nedir?

PWA Nedir başlığını temsil eden, mobil uygulama görünümünde bir Progressive Web App simgesi veya görseli

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

Web Araçları

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

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

Base64 Encoder & Decoder

Metin ve görselleri Base64 formatına dönüştürün veya Base64 kodunu çözün. API geliştirme ve veri aktarımı için vazgeçilmez.

Kod & GeliştirmeGeliştirici

CSS Oluşturucu

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

Web TasarımÜcretsiz

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

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

Web Editor

HTML ve CSS kodlarınızı yazın, düzenleyin ve canlı önizlemeyi görün. Hızlı prototipleme ve öğrenme için ideal.

Kod & GeliştirmeCanlı Düzenleyici

Renk Seçici

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

Web TasarımAraç

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