Merhaba Tailwind CSS

💡 Özet (TL;DR):

• Nedir: Klasik component-based (bileşen tabanlı) framework'lerden (Bootstrap, Bulma vb.) farklı olarak, HTML'den ayrılmadan doğrudan utility-first (işlev öncelikli) sınıflarla tasarım yapmayı sağlayan modern bir CSS kütüphanesidir.
• Farkı: Hazır buton veya kart tasarımları sunmak yerine, bg-blue-500, font-bold gibi temel CSS yapı taşlarını sunarak geliştiriciye tam tasarım özgürlüğü sağlar.

Bootstrap, Twitter tarafından açık kaynak kodlu olarak yayınlandığında responsive web tasarımlarına büyük bir hız kazandırmış, sonrasında Bootstrap ile yapılmış şablon siteler internetin her köşesinde karşımıza çıkar olmuştu. Bootstrap; frontend geliştirmeye vakit harcamak istemeyen veya uzmanlığı bu olmayan yazılımcıların hızlıca kullanabildikleri hazır bir giysi gibi oldu. Geliştiricilerin adeta kurtarıcı siyah tişörtü haline geldi diyebiliriz.

Bootstrap'i Foundation, Bulma ve daha birçok CSS framework'ü takip etti. Ben de Foundation'a sadece göz atmakla kalsam da Bulma'yı detaylıca kurcalamıştım. Bu framework'ler daha az CSS ile daha kısa sürede, daha modern tasarımlar yapmamızı sağladıkları için popüler oldular. Peki acaba gerçekten modern ve yenilikçi tasarımın önünü açtılar mı? Bunlarla yapılan siteler bir tasarım harikası mı, yoksa hepimiz aynı şablonları eğip büküp birbirine benzer siteler mi üretiyoruz?

Bootstrap vs. Tailwind CSS Kod Karşılaştırması

1. Tailwind CSS Nedir?

Tailwind CSS; en temel CSS özelliklerini sıfırdan yazmanızı veya aynı CSS kurallarını tekrar tekrar yazmanızı engelleyen, ön yüz geliştiricilerin işini çok kolaylaştıran ama özgürlüğünü de sınırlandırmayan bir CSS framework'üdür.

Tailwind CSS resmi sitesinde ana sayfada vurgulandığı üzere, HTML kodunuzdan hiç ayrılmadan hızlıca modern web siteleri oluşturabilirsiniz. Tailwind size "buton" veya "tablo" gibi hazır bileşenler sunmaz, daha alt seviyede faydalı CSS sınıfları (utility classes) sunar. Bir düğmeye btn btn-primary sınıflarını atayarak o düğme için şablon bir tasarım kullanmak yerine, temel sınıfları atayarak düğmenizi tamamen kendiniz tasarlarsınız.

Aşağıdaki kod parçasında Bootstrap btn btn-primary sınıfı ile yaratılmış bir düğme örneği ve yanında da Tailwind CSS bg-blue-500 hover:bg-purple-dark text-white font-bold py-2 px-4 rounded sınıfları ile oluşturulmuş muadilini görüyorsunuz.

Her ne kadar Tailwind CSS ile HTML içerisinde daha uzun bir sınıf listesi kullanmak zorunda kalsak da (kısaltılabiliyor ama nasıl kısaltılacağına bu giriş yazısında değinmeyeceğim) temel sınıflar kullanarak sıfırdan ve Bootstrap'ten çok daha özgün sonuçlar elde etmemiz mümkündür.

2. Bootstrap veya Bulma'dan Tailwind'e Geçiş Yapmak Zor mu?

Tailwind'in detaylı ve basit dokümanı sayesinde temel sınıflarını öğrenmek ve gerektiğinde el kitabı niyetine hızlıca aratıp bulmak son derece kolaydır. Tailwind'i bir CDN üzerinden veya önceden derlenmiş statik CSS olarak indirip kullanmak isterseniz teknik olarak hiçbir zorluğu yoktur.

Fakat, projeye özel özelleştirmeler yapmak, kullanmadığınız CSS bölümlerini nihai dosyaya dahil etmemek (Purge/JIT derlemesi) yani ihtiyacınıza göre derlemek isterseniz yapılandırma biraz daha karmaşıklaşacaktır. Bunun nasıl yapılacağı bu temel giriş yazısının kapsamını aşmaktadır.

3. Bundan Sonrası

Gelecekte Tailwind CSS'in ileri seviye kurulum ve kullanımı ile ilgili bir yazı ve örnek kısa kod parçacıkları içeren yazılar paylaşmayı düşünüyorum. Tailwind CSS Just in Time modu ve Tailwind CSS nerelerde kullanılır, nerelerde kullanılmaz başlıklı yazılarım da yayında.

Siz de sorularınız ve yorumlarınızla beni yönlendirirseniz memnun olurum.

Bu Yazıda Yapılan Değişiklikler

• 11.05.2022: Yazı özeti düzenlendi. Tasarımcı kelimesi Ön yüz geliştirici olarak değiştirildi.
• 21.06.2026: Türkçe imla kuralları (tişört, doküman, hiçbir, gerektiğinde, birçok, Bootstrap'ten vb.) düzeltildi, marka isimlerinin yazımı standartlaştırıldı. Giriş için TL;DR özet paneli ve Bootstrap karşılaştırma tablosu eklenerek zenginleştirildi.