Frontend dünyasında popülerleşen Tailwind CSS, v4.0 sürümüyle karşımıza çıktı. Doğrudan HTML içinde hızlı ve modern web siteleri oluşturmayı sağlayan bu CSS framework'ü, yeni sürümüyle esneklik ve performansı artırıyor.
Geçmişten Günümüze CSS Kullanımı
CSS'in gelişimine kronolojik olarak baktığımızda şu aşamaları görebiliriz:
- Başlangıçta tüm CSS kodlarımızı tek bir style.css dosyasına yazıyorduk.
- Karmaşıklığı azaltmak için @import kullanarak farklı dosyalara bölmeye başladık. Ancak bu yöntem performans sorunlarına yol açtı.
- Daha sonra SASS, LESS, Stylus gibi CSS pre-processor'lar hayatımıza girdi ve birçok sorunu çözdüler.
- Ardından, Bootstrap gibi kütüphanelerin öncülüğünde çeşitli CSS framework'leri geliştirildi. Bu framework'ler, sundukları hazır grid yapıları ve bileşenler sayesinde daha hızlı ve kolay web sitesi geliştirmeyi mümkün kıldı.
- Tailwind CSS ise tüm bu gelişmelerin ötesinde, çeşitli açılardan daha avantajlı bir çözüm sunuyor. Hazır sınıfları, yüksek özelleştirilebilirliği, performansı ve daha az kod yazma imkânı sayesinde günümüzün en popüler CSS framework'lerinden biri haline geldi. Ayrıca, UI açısından şık ve performans açısından kaliteli bir çözüm sunan shadcn/ui gibi kütüphanelerin Tailwind ile entegre çalışması ve Next.js'in kurulum aşamasında Tailwind'i otomatik olarak yüklemesi gibi avantajlar, kullanım oranını her geçen gün artırıyor.
Tailwind CSS nedir?
En temel anlatımıyla Tailwind CSS, HTML ve JavaScript bileşenlerini sınıf isimlerine göre tarar, karşılık gelen stilleri oluşturur ve bunları statik bir CSS dosyasına yazar. Örneğin, bg-red-500 sınıfını eklediğimizde, Tailwind CSS bir stil dosyası oluşturur ve bu sınıfın karşılığı olan background-color: #fb2c36; değerini ekler.
<div className="bg-red-500">
<p>Merhaba, dünya!</p>
</div>