Merhaba Tailwind CSS

Tailwind CSS en temel CSS kullanımlarını sıfırdan yazmanızı veya aynı CSS’leri 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.


Merhaba Tailwind CSS

Bootstrap Twitter tarafından açık kaynak kodlu olarak yayınlandığında responsive web tasarımlarına hız kazandırmış, Bootstrap’le yapılmış şablon siteler her yerde karşımıza çıkar olmuştu. Bootstrap Frontend’e vakit harcamak istemeyen veya uzmanlığı bu olmayan geliştiricilerin hızlıca kullanabildikleri bir şablon haline geldi. Geliştiricilerin siyah tshirt’ü oldu diyebiliriz.

Bootstrap’i Foundation, Bulma ve daha bir çok CSS frameworkleri takip etti. Ben de Foundation’a sadece göz atmakla kalsam da Bulma’yı detaylı kurcalamıştım. Bu frameworkler 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 eğip büküp hepimiz aynı şablonu mu kullanıyoruz?

Tailwind CSS nedir?

Tailwind CSS en temel CSS kullanımlarını sıfırdan yazmanızı veya aynı CSS’leri 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.

Tailwind CSS resmi sitesinde ana sayfada vurgulandığı üzere Tailwind CSS HTML kodunuzdan hiç ayrılmadan hızlıca modern web siteleri oluşturabileceğiniz bir CSS framework’ü. Tailwind size “buton” veya “tablo” gibi bileşenler değil, daha temel seviyede CSS kalıpları sunuyor. 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 oluşturuyorsunuz.

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 “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 ile daha uzun bir sınıf listesi kullanmak zorunda kalsak da (kısaltılabiliyor ama nasıl kısaltılacağına merhaba yazısında değinmeyeceğim) temel sınıflar kullanarak sıfırdan bootstrapden daha güzel sonuçlar elde etmemiz mümkün.

Bootstrap veya Bulma’dan Tailwind’e geçiş yapmak zor mu?

Tailwind’in detaylı ve basit dökümanı sayesinde temel sınıflarını öğrenmek, gerektiğnde el kitabı niyetine kolayca bakmak çok kolay. Tailwind’i CDN’den veya derlenmiş CSS olarak indirip kullanmak isterseniz teknik olarak da hiç bir zorluğu yok. Fakat, özelleştirmeler yapmak, kullanmadığınız bölümlerini dahil etmemek, yani ihtiyacınıza göre derlemek isterseniz biraz daha karmaşıklaşacak ve nasıl olacağını anlatmak “Merhaba Tailwind” yazısı için biraz fazla olacaktır.

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.

Bir soru, öneri ya da yorumunuz mu var?

Evren Bal

Ben Evren BAL

1996'dan beri ‘Internet canlısıyım!’

Evren Bal Hakkında daha fazla bilgi.

Tanışmak isterseniz hemen sosyal medyadan iletişime geçebilirsiniz.

Bana Ulaşın

Bana Ulaşın

  • Bir sorunuz mu var?
  • Yazıda bir hata mı farkettiniz?
  • Sayfa ile ilgili bir öneriniz mi var?
  • Yazmamı önereceğiniz bir konu mu var?

Lütfen iletişim formunu kullanarak veya sosyal medya hesaplarımdan bana ulaşın.

Digital Ocean Logo

VPS sunucusu denemek ister misiniz?

Digital Ocean'a referans bağlantımdan kayıt olarak yeni oluşturacağınız hesabınızı 60 gün geçerli 100$ kredi ile açabilirsiniz. Bu miktar yüksek performanslı VPS'leri bile denemeniz için yeterlidir.

Yapacağınız onca kurulumun boşa gitmemesi için benim tavsiyem uzun vadede kullanabileceğiniz özellik ve maliyetlerde bir sunucu oluşturmanızdır.

Ücretsiz 100$ kredi bağlantısı

60 günlük denemeniz sonunda eğer devam etmek istemezseniz hiç bir ücret ödemeyeceksiniz. Hizmeti kullanmaya devam etmek isterseniz harcamanız 25$'a ulaştığında benim hesabıma da 25$ kredi yüklenecektir.

Diğer bir deyişle, siz 100$ ücretsiz krediyi her halükarda kazanırken, daha sonra ücretli devam etmeye karar verirseniz ben de 25$ kredi kazanacağım.

Copyright © 2022 - Evren BAL