Tailwind

Tailwind Nedir

Tailwind CSS, stili ayrı bir CSS dosyasında isimlendirilmiş sınıflarla değil, HTML'de tek iş yapan küçük sınıfları birleştirerek yazdığınız bir CSS framework'üdür. Bu yaklaşıma utility-first denir.¹

<div class="mx-auto flex max-w-sm items-center gap-4 rounded-xl bg-white p-6 shadow-lg">
  <p class="text-xl font-medium text-gray-900">Merhaba</p>
</div>

Her sınıf tek bir CSS kuralına karşılık gelir: flex → display: flex, p-6 → padding, rounded-xl → border-radius. Bu ders CSS dersinin üstüne kurulur. CSS bilinmeden Tailwind kullanılmaz; Tailwind yalnızca CSS'i daha hızlı yazdırır.

Neden bu kadar yaygın:¹

• Hız: Sınıfa isim bulmak, HTML ile CSS dosyası arasında gidip gelmek yok. (Tailwind'den önce bir elemente ne isim vereceğimizi düşünürken dakikalar geçerdi. CSS yazmak işin kolay kısmıydı; asıl zor olan .card-wrapper mı .card-container mı, ona karar vermekti.)

• Güvenli değişiklik: Bir elemana sınıf eklemek ya da silmek yalnızca o elemanı etkiler.

• Büyümeyen CSS: Yeni özellik eklendikçe CSS dosyası doğrusal olarak büyümez.

İlk bakışta inline style'a benzer ama farkı büyüktür: değerler sabit bir tasarım ölçeğinden gelir (p-4, p-6; rastgele 13px değil) ve hover, focus ya da ekran genişliği gibi inline style'ın yapamadığı durumlar desteklenir.¹² Fikrin nereden çıktığını Tailwind'in yaratıcısı Adam Wathan'ın yazısı anlatır.³

Tailwind CSS bugün en çok kullanılan CSS framework'ü: State of CSS 2025 anketinde bu soruyu yanıtlayan yaklaşık 4.000 kişinin yarısından fazlası Tailwind kullandığını söyledi.⁴

Kurulum

Bu ders Tailwind CSS v4 sözdizimini kullanır. v4'te tailwind.config.js dosyası ve content ayarı yoktur; Tailwind projedeki dosyaları tarayıp kullandığınız sınıfların CSS'ini kendisi üretir.⁵

Next.js projesinde:⁶

$ pnpm add tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

/* app/globals.css */
@import "tailwindcss";

Vite kullanan projelerde paket @tailwindcss/vite'tır.⁷ Hiçbir şey kurmadan denemek için resmi online editör Tailwind Play'i kullanabilirsiniz.⁸

Tailwind'in temel stilleri (Preflight) tarayıcı varsayılanlarını sıfırlar: margin'ler sıfırlanır, h1–h6 normal metin boyutunda görünür, listelerde madde işareti olmaz.¹⁰ "Başlığım neden büyük değil?" sorusunun cevabı budur; boyutu sınıfla verirsiniz.

Temel Sınıflar

Renkler 50 (en açık) ile 950 (en koyu) arasında 11 tondan oluşur; /75 gibi bir ek rengin opaklığını ayarlar.¹¹ Ölçekte olmayan tek seferlik bir değer gerekirse köşeli parantez kullanılır: top-[117px], bg-[#316ff6].¹²

Durumlar: hover, focus ve diğerleri

Bir sınıfın önüne variant eklemek, onu yalnızca o durum gerçekleştiğinde uygular.²

<button class="bg-sky-500 hover:bg-sky-700 focus:outline-2 disabled:opacity-50">
  Kaydet
</button>

• Pseudo-class: hover:, focus:, active:, disabled:, first:.¹³

• Ebeveynin durumu: Ebeveyne group verilir, çocuk group-hover: ile ebeveynin üstüne gelindiğinde değişir.¹³

• Attribute: aria-expanded:, data-active: gibi variant'lar erişilebilirlik ve durum attribute'larına bağlanır.¹³

Variant'lar zincirlenebilir: dark:md:hover:bg-fuchsia-600.¹³

Responsive

Tailwind mobile-first çalışır: ön eksiz bir sınıf her ekranda geçerlidir, md: gibi bir ön ek ise "bu genişlik ve üstü" demektir.¹⁴

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">...</div>

Bu liste telefonda tek, tablette iki, geniş ekranda üç sütun olur.

Bileşeni ekrana göre değil, içinde durduğu alana göre değiştirmek için container query vardır: ebeveyne @container, çocuğa @md:flex-row gibi sınıflar verilir.¹⁴

Dark Mode

dark: variant'ı varsayılan olarak işletim sisteminin tema tercihine (prefers-color-scheme) bakar.¹⁵

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">...</div>

Temayı bir butonla açıp kapatmak istiyorsanız dark: variant'ını bir class'a bağlarsınız; <html class="dark"> olduğunda dark stiller devreye girer:¹⁵

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Tema

Renk, font, breakpoint gibi tasarım değerleri CSS içinde @theme bloğunda tanımlanır. Buraya eklenen her değişken otomatik olarak yeni sınıflar üretir.¹⁶

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 259);
  --font-display: "Inter", sans-serif;
}

Artık bg-brand-500, text-brand-500 ve font-display sınıfları kullanılabilir. Değişkenin öneki (--color-*, --font-*, --breakpoint-*) hangi sınıf ailesinin oluşacağını belirler. Tema değerleri normal CSS değişkeni olarak da durur, var(--color-brand-500) ile her yerde okunur. Sınıf üretmesini istemediğiniz değişkenler için @theme yerine :root kullanılır.¹⁶

React'te Kullanım

Tekrarı component ile çözün

Aynı uzun sınıf listesini birçok yerde yazıyorsanız çözüm genellikle yeni bir CSS sınıfı değil, bir component'tir: stil tek yerde durur, her yerde aynı kalır.¹⁷ Liste döngüyle üretiliyorsa sınıf zaten bir kez yazılmıştır.¹⁷ @apply ile sınıfları CSS'e taşımak mümkündür ama öncelikli yol değildir.¹⁸

Sınıf adını parça parça üretmeyin

Tailwind kaynak dosyalarını düz metin olarak tarar; çalışma anında birleştirilen sınıf adlarını göremez, bu yüzden CSS'ini de üretmez.¹⁹

// Çalışmaz: bg-blue-600 metni kaynakta hiç geçmiyor
<button className={`bg-${color}-600`}>Kaydet</button>

// Çalışır: tam sınıf adları kaynakta açıkça yazılı
const colorVariants = {
  blue: "bg-blue-600 hover:bg-blue-500",
  red: "bg-red-600 hover:bg-red-500",
};

<button className={colorVariants[color]}>Kaydet</button>

Çakışan sınıfları birleştirmek

Bir component varsayılan sınıflarının üstüne dışarıdan className alıyorsa px-2 ile px-4 aynı elemanda kalabilir ve hangisinin kazanacağı belirsizleşir. Yaygın çözüm clsx ile koşullu sınıfları toplamak, tailwind-merge ile çakışanları ayıklamaktır; ikisi genellikle cn adlı bir yardımcıda birleştirilir.²⁰²¹

$ pnpm add clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

cn("px-2 py-1", isLarge && "px-4"); // isLarge true ise "py-1 px-4"

Araçlar

• Tailwind CSS IntelliSense: VS Code ve Cursor için eklenti; sınıf adlarını tamamlar, hatalı sınıfı işaretler, üzerine gelince üretilen CSS'i gösterir.²²

• Prettier eklentisi: Sınıfları her dosyada aynı sıraya dizer, böylece uzun listeler daha kolay okunur.²²

Eleştiriler

Tailwind CSS tartışmalı bir araç. En sık itirazlar: uzun sınıf listeleri HTML'i okumayı zorlaştırır, sınıf adındaki yazım hatası (txt-blue) editörde fark edilmez ve CSS'e ek olarak Tailwind'in isimlendirmesini de öğrenmek gerekir.²³²⁴ Savunanlar ise sabit tasarım ölçeğinin ekip içinde tutarlılık sağladığını vurgular; sert eleştirmenler bile bu noktayı kabul eder.²⁴ Dengeli bir değerlendirme için Chris Coyier'in yazısı iyi bir başlangıçtır.²³

Detaylı Öğrenmek İçin

• Resmi doküman: Tailwind dokümanının "Core concepts" bölümü bu dersin her başlığını derinlemesine anlatır; sınıf referans sayfalarına ihtiyaç oldukça bakılır.¹

• v3'ten gelen kod: Eski bir projeyle ya da eğitimle karşılaşırsanız upgrade guide.⁹

• Konuşma: Sarah Dayan'ın utility-first yaklaşımın neden ortaya çıktığını anlattığı 18 dakikalık konuşma (dotCSS 2019).²⁵

• Konuşma: Sarah Dayan'ın utility sınıflarının neden inline style olmadığını anlattığı konuşma (CSS Day 2024).²⁶

• Yazı: Sarah Dayan'ın utility-first savunusu; dezavantajları da dürüstçe sayar.²⁷