Tailwind CSSvsBootstrap

Tailwind CSS ve Bootstrap, HTML'e sınıf ekleyerek kullanılan iki CSS framework'üdür; ama karşıt uçlardan başlarlar. 2011'de Twitter tarafından yayımlanan Bootstrap; butonlar, kartlar, gezinme çubukları ve modallar gibi tanıdık bir görünümü olan hazır bileşenler ve 12 sütunlu, duyarlı bir grid sunar. 2017'de yayımlanan Tailwind CSS ise p-4, bg-blue-600 ve rounded-lg gibi, her biri tek bir iş yapan binlerce küçük utility sınıfı sunar; her tasarımı bunlardan siz kurarsınız.

Fark, tasarımın nereden geldiğindedir. Bootstrap'te btn btn-primary size anında biçimlendirilmiş bir buton verir; görünümü değiştirmek ise Sass değişkenlerini ya da CSS'i ezmek demektir ve pek çok Bootstrap sitesinin birbirine benzemesi bu yüzdendir. Tailwind'in varsayılan bir görünümü yoktur: utility'leri, özelleştirdiğiniz bir tasarım ölçeğinden gelen md:, hover: ve dark: gibi ön eklerle birleştirirsiniz; böylece tasarımlar özgün olabilir, ama her öğe daha uzun bir sınıf listesi taşır. Tailwind ayrıca yalnızca kullandığınız sınıfları üretir; Bootstrap ise onu Sass'tan yalnızca ihtiyacınız olan parçalarla derlemediğiniz sürece stil dosyasının tamamını gönderir.

Pratikte sınırlar iç içe geçer. Bootstrap'in de mt-3 ve d-flex gibi utility sınıfları vardır, Tailwind üzerine kurulu bileşen kütüphaneleri de hazır parçalar sunar. Bootstrap modallar, açılır menüler ve karuseller için JavaScript eklentileri içerir ve bunlar Bootstrap 5'ten beri jQuery gerektirmez; Tailwind ise yalnızca CSS'tir ve davranışı framework'ünüze ya da kodunuza bırakır. React, Vue ya da benzeri framework'lerle geliştiren ekipler genellikle Tailwind'i tercih eder ve tekrar eden sınıf listelerini kendi bileşenlerinin içinde tutar; Bootstrap ise yönetim panellerinde, şirket içi araçlarda ve prototiplerde yaygın olmayı sürdürür.

Sık yapılan bir yanlış, Tailwind'in daha kısa adlı satır içi stiller (inline style) olduğu düşüncesidir. Sınıfları kırılma noktalarını, hover ve focus durumlarını, koyu modu ve ortak bir tasarım ölçeğini destekler; satır içi stiller bunları yapamaz. Bir başkası, Bootstrap'in modasının geçtiği düşüncesidir: hâlâ geliştirilmektedir ve 5.3 sürümünde koyu renk modu ekledi. Genel olarak biri diğerinden iyi değildir; asıl soru, hazır bir tasarım mı yoksa kendi tasarımınız için yapı taşları mı istediğinizdir.