Tailwind CSS 2023 2 – Tailwind CSS Nedir?

Merhabalar.

Bu yazımda Tailwind CSS nedir sorusuna cevap arıyor olacağız.

Tailwind CSS, CSS (Cascading Style Sheets) tabanlı bir utility-first (özellik öncelikli) bir framework olup, önceden tanımlanmış sınıflar sunarak web sayfalarınızı doğrudan Html içinde oluşturmanıza ve tasarlamanıza olanak sağlar.

Utilty First Yaklaşımı

Utility-first yaklaşımı, CSS sınıflarının belirli CSS özelliklerini temsil etmesi ve bu sınıfların HTML’de birleştirilerek karmaşık tasarımlar oluşturulabilmesi anlamına gelir.

Bu yaklaşım, daha hızlı ve daha az hatalı kodlama yapmayı sağlar ve CSS’in özelliklerini daha etkin kullanmanıza olanak tanır.

Yani, stil belirlemek için CSS dosyalarında kurallar yazmak yerine, HTML dosyanızdaki elementlere sınıflar ekleyerek stilleri belirlersiniz. Bu, hızlı prototipler oluşturmanıza ve stil değişikliklerini daha kolay yönetmenize olanak tanır.

Kullanım

Örneğin, bir div’in arka plan rengini mavi yapmak için normalde CSS’de şöyle bir kural seti yazardınız:

div {
  background-color: blue;
}

Ancak Tailwind CSS kullanarak bunu şu şekilde yapabilirsiniz:

<div class="bg-blue-500">
  <!-- İçerik buraya gelecek -->
</div>

bg-blue-500 sınıfı, arka plan rengini belirler. 500 sayısı, rengin yoğunluğunu ifade eder ve bu durumda mavi tonunu temsil eder.

Tailwind’i Öne Çıkaran Özellikler

Tailwind CSS, geniş bir renk paleti, tipografi, kenar boşluğu, iç içe geçme gibi birçok özelliği kapsayan utility sınıflarına sahiptir. Bu sayede özelleştirmeleri hızlı bir şekilde yapabilirsiniz.

Tailwind CSS ile çeşitli tasarım gereksinimleri arasında tutarlılık sağlayan bir tasarım sistemi gelir, böylece kendi tasarım sistemlerinizi oluşturma konusunda endişelenmenize gerek kalmaz.

Tailwind CSS, CSS özelliklerine dayalı olarak oluşturulan bir araçtır ve tüm çerçeve işlevselliği, sınıflar olarak oluşturulan CSS stillerinden türetilmiştir. Bu, daha az çalışma yaparak geliştirme hızını artıracaktır.

Tailwind CSS, frontend web projelerinde, React.js, Next.js, Laravel, Vite, Gatsby gibi JavaScript çerçevelerinde kullanılabilir.

Farklı bir örnekle daha Tailwind CSS kullanımına bakalım.

<div class="flex flex-row">
  <button> Button 1 </button>
  <button> Button 2 </button>
  <button> Button 3 </button>
</div>

Bu örnekte, flex ve flex-row sınıfları kullanılarak bir dizi buton oluşturulmuştur. flex sınıfı, flexbox düzenini etkinleştirir ve flex-row sınıfı, öğelerin yatay bir sıra halinde düzenlenmesini sağlar.

Tailwind CSS’nin avantajlarından biri, CSS pratiklerinizi artırma olanağı sağlamasıdır.

Ufak Bir Dezavantaj

Tailwind CSS ile sayfa kodladığınızda, tüm stillerin HTML dosyalarında olması durumunda, büyük projelerde markup’ınızın düzensiz görünebileceğini unutmamak önemlidir.

Ancak bunun içinde bir çözüm önerisi ve yaklaşımı bulunmaktadır.

Tailwind CSS’yi kullanmayı düşünüyorsanız, önce CSS’yi öğrenmiş ve pratik yapmış olmanız önemlidir.