Tailwind CSS ile Modern Design System Kurulumu

Tailwind CSS, modern frontend'in defakto CSS standartı oldu. "Utility-first" yaklaşım başlangıçta tartışmalıydı, şimdi Linear, Vercel, Netflix, Notion gibi sektörel liderlerin tercihi.

Utility-first nedir?

Klasik CSS: .btn-primary {...} sınıfı tanımla, kullan. Tailwind: "bg-blue-500 text-white px-4 py-2 rounded" inline utility'leri birleştir. İlk bakışta dağınık ama: tutarlılık otomatik, dead CSS yok, component co-location.

Tailwind 4 — 2025 yeni motor

Oxide engine ile %5-10x daha hızlı build. CSS-first config (@theme directive ile JS config opsiyonel). Native CSS variables, container queries native, modern features daha iyi destek.

Design tokens

• Renk: bg-ink, text-bone, border-accent — semantic isimler
• Spacing: p-4 (16px), gap-6 (24px) — 4px scale
• Tipografi: text-display, text-body — semantic sizes
• Shadow, radius, animation — hepsi tema değişkenine bağlı

Component patterns

Static componentlar

React/Vue component içinde Tailwind class'ları doğrudan kullan. Tutarlılık prop'larla yönetilir.

@apply directive

Çok tekrar eden pattern için @apply ile yeni utility class oluştur. `.btn-primary { @apply bg-accent text-white px-4 py-2 rounded; }`. Modern yaklaşım: bunu component'te yapmak daha temiz.

clsx / cn helper

Conditional class merging için. `cn('bg-ink', isActive && 'border-accent', size === 'lg' && 'p-6')`. tailwind-merge ile çakışan utility'ler otomatik çözülür.

Headless UI / Radix UI / shadcn-ui

Tailwind ile uyumlu accessible component kütüphaneleri. shadcn-ui (Tailwind + Radix) ekosistemi 2024-2025'te dominant oldu. Component kütüphanesi installetmek yerine source code'u projeye kopyalama yaklaşımı.

Performans

• Sadece kullandığın utility'ler bundle'a girer (PurgeCSS otomatik)
• Build sonrası ortalama 8-15KB gzipped
• Class isimleri tekrar eder → gzip kompresyon çok iyi
• Critical CSS inline kolay (utility'ler kısa)

Eleştiri ve karşı argüman

"HTML kirli görünür" en yaygın eleştiri. Karşı argüman: classNames component dosyasında yaşar, ayrı CSS dosyası yönetme yükü yok. "Semantic HTML" eleştirisi: utility class'lar HTML semantic'i değil görsel sunum. Modern toolchain'de dezavantaj minimal.

Şunu yapmayın: Tailwind ile inline style yazmak

`style={{padding: '16px'}}` yerine `className="p-4"`. Inline style theme entegre değil, override zor. Utility class kullan.

Sıkça sorulan sorular