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

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?

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?

Yapay zeka ile otomatik web tasarımı yapan arayüz, renk paleti ve layout önerileri gösteren ekran görüntüsü

Yapay Zeka Destekli Web Tasarımı

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

Websitesi Nedir?

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

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

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

Node.js Nedir?

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

GraphQL Nedir?

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?

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

Hosting Nedir?

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

QR Menü 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

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

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

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

Nuxt.js Nedir?

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

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

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

Voice UI ve Sesli Arama Optimizasyonu

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

Next.js Nedir?

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

Google Analytics Nedir?

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

Server-First ve Edge Rendering

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

Motion UI ve Mikro Animasyonlar

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?

React logosu ve bileşen ağacını gösteren klasik ekran görüntüsü

React Nedir?

Blockchain zinciri ve decentralized ağ yapısını gösteren futuristik görsel

Web3 ve Decentralized Web

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?

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

API Nedir?

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

Remix.run Nedir?

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?

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

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

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

Angular 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 Araçları

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

PDF Küçültücü & Sıkıştırıcı

PDF dosyalarınızı kalite kaybı minimumda %50-90 küçültün. Dosya boyutu seçimi, sayfa optimizasyonu ve tamamen tarayıcıda işlem – sunucuya yükleme yok!

PDF & DokümanPopü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 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

CSS Oluşturucu

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

Web TasarımÜcretsiz

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

Renk Seçici

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

Web TasarımAraç

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

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