Merhaba,


Bu yazı tam olarak düz css, bootstrap ve tailwind css karşılaştırması olmayacak. Tailwind css nedir, nasıl kullanılır gibi bilgiler vereceğim. Ve bir örnek belirleyip onu üçüyle yapmaya çalışacağız. Bakalım hangisi ne kadar kolaylık sağlayacak.


Örneğimiz şu olsun;


Burada tek tek yapım aşamalarını anlatmayacağım ancak bunları yaparken ki yorumlarımı sizlerle paylaşacağım.

İlk olarak örneklerin bitmiş hallerini sizlerle paylaşayım;

Pure CSS ile yaptığımız örnek: https://codepen.io/MehmetSert/pen/ZdGgPz

Bootstrap ile yaptığımız örnek: https://codepen.io/MehmetSert/pen/BgNXEP

Tailwind css ile yaptığımız örnek: https://codepen.io/MehmetSert/pen/ZdbzJW


Her biri için yorumlarıma geçmeden önce şunu belirtmek istiyorum: Tailwind CSS'i ise yaklaşık 10-15 dk inceledikten sonra bu örnekleri yapmaya karar verdim.

O yüzden Tailwind CSS'te yanlış kullandığım bir şey olmuşsa bunu bana bildirin hem ben hatamı düzelteyim doğrusunu öğreneyim hemde bu yazıyı okuyacak diğer arkadaşlarımız yanlış öğrenmesin.


Şimdi yorumlarıma geçelim;

Üçünde de zorlanmadan örnekleri bitirdim. Pure CSS ile yaptığım örnek ve Bootstrap kullanarak yaptığım örneği karşılaştıracak olursak eğer;

Bootstrap'in size verdiği tasarım, yapmak istediğiniz tasarımı karşılamıyorsa açıkcası sizin css yazarak bunu sağlamanız gerekiyor. Burada aslında Bootstrap sadece yapısı ve şablonlarıyla size faydalı oluyor. Tasarımını değiştirmek tamamen sizin css bilginize bakıyor.

Tailwind CSS'e geçecek olursak, örnekte de belli olduğu üzere hiç css yazmadan örnek tasarımı çıkartabiliyoruz kendisiyle. Zaten Tailwind CSS'in amacı sizlere diğer css frameworkleri gibi hazır şablonlar, componentler vermek değil utility sınıflar verip ihtiyacınız olan tasarımı çıkarmanıza yardımcı olmak. Bunun sayesinde de css yazmadan örnek tasarımı çıkarabildik ve gerçekten çok başarılı. Tabiki yukarıda söylediğim gibi Tailwind CSS'i sadece 10-15 dakika inceledikten sonra böyle bir yorum yapabilmek Tailwind CSS'in aslında çok başarılı olduğunu bizlere göstermiş oluyor (en azından benim için).


Tailwind CSS'ten biraz daha bahsedecek olursak;

Tailwind sizlere hazır bir tema veya tasarım vermiyor bunun yerine size daha esnek hareket edebileceğiniz sınıflar veriyor ve bunları kullanarak kendi bileşenlerinizi oluşturmanıza daha özgün tasarımlar yaratmanıza olanak sağlıyor. Ve tüm bunlar responsive tasarım göz önünde bulundurularak hazırlanmış. Bu classları kullanarak hiç css yazmadan çıkartmak istediğiniz tasarımı çıkartabiliyorsunuz. focus, hover gibi özellikleri bile belirtebiliyorsunuz.


Çok basit bir örnek vermek gerekirse;

Yukarıdaki butonları şu kodlar ile oluşturabiliyoruz;

<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-2 rounded">Tailwind CSS</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-medium px-6 py-2 rounded">Tailwind CSS</button>
<button class="bg-red-500 hover:bg-red-600 text-white font-medium px-6 py-2 rounded">Tailwind CSS</button>
<button class="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-2 rounded">Tailwind CSS</button>
<button class="bg-yellow-800 hover:bg-yellow-900 text-white font-medium px-6 py-2 rounded">Tailwind CSS</button>
<button class="bg-teal-700 hover:bg-teal-800 text-white font-medium px-6 py-2 rounded">Tailwind CSS</button>


Veya;

Bu input için aşağıdaki classları vermek yeterli;

<input type="text" class="bg-gray-300 px-4 py-2 text-sm outline-none focus:bg-gray-200" placeholder="Arama yap...">


Bunlarla beraber mobilde farklı class tablette farklı class büyük ekranda farklı class verme gibi olanaklarda sağlıyor;

Onada örnek vereyim;

Normalde py-4 classı olsun ama mobilde py-2 olsun istiyoruz;

<div class="py-4 sm:py-2">...</div>

Veya mobilde görünmesin istiyoruz;

<div class="sm:hidden">...</div>


Evet bu kadar basit.


Burada aklınıza şöyle bir soru gelmiş olabilir: iyi güzelde her seferinde bu kadar class mı yazacağız?

Tailwind'de bunu düşünmüş tabiki;

Tailwind PostCSS ile yazılmış, yazılan PostCSS kodu compile edilip css olarak kullanılabiliyor. Burada ise @apply özelliği ile siz bir class belirleyip onun içerisinde diğer classların özelliklerini çağırabiliyorsunuz. (Tailwind'i cdn ile dahil ederseniz bu özelliği kullanamıyorsunuz. Bunu yapabilmek için npm ile dahil etmeniz gerekiyor. Bknz: https://tailwindcss.com/docs/installation)

Şöyle ki;

.custom-button-1 {
   @apply text-white font-medium px-6 py-2 rounded;
}

Bunu yaptıktan sonra ne oluyor? Hani yukarıda butonlar oluşturmuştuk ya o butonları artık şöyle oluşturabiliyoruz;

<button class="custom-button-1 bg-blue-500 hover:bg-blue-600">Tailwind CSS</button>
<button class="custom-button-1 bg-green-500 hover:bg-green-600">Tailwind CSS</button>
<button class="custom-button-1 bg-red-500 hover:bg-red-600">Tailwind CSS</button>
<button class="custom-button-1 bg-orange-500 hover:bg-orange-600">Tailwind CSS</button>
<button class="custom-button-1 bg-yellow-800 hover:bg-yellow-900">Tailwind CSS</button>
<button class="custom-button-1 bg-teal-700 hover:bg-teal-800">Tailwind CSS</button>


Yukarıda oluşturduğumuz inputuda şu şekilde yapabiliriz;

.custom-input-1 {
   @apply bg-gray-300 px-4 py-2 text-sm outline-none focus:bg-gray-200;
}



<input type="text" class="custom-input-1" placeholder="Arama yap...">


Bunlarla beraber Tailwind'de özelleştirmelerde yapabiliyorsunuz. Mesela sizin istediğiniz renk yok mu veya sizin istediğiniz bir class yok mu? onu ekleyebiliyorsunuz. Örneğin "bg-kahverengi" oluşturabiliyorsunuz.

Bunu nasıl yapacağız derseniz eğer henüz ben denemedim, denedikten sonra müsait bir vakitte onuda eklerim. Veya bu yazıyı okuyup bilen varsa burada paylaşabilir.


Uzun lafın kısası Tailwind CSS gerçekten çok başarılı. Ben 10-15 dakikalık bir inceleme sonucu çok sevdim ve örnek yaparak bunu paylaşmak istedim. Projelerimde bunu kullanmaya başlayacağım sizlere de tavsiye ederim. Bootstrap'ten vazgeçemeyenler içinse ikisini aynı anda kullanabilirsiniz.


Umarım faydalı bir anlatım olmuştur.