Tailwind Neden Harikadır ve Web Geliştirmeyi Nasıl Kolay Hale Getirir?

Bir zamanlar web sitelerimizde sayfaları stillemek için html ve css arasında atlardık, hatırlıyor musunuz?

Bu aslında geçen yıl bendim. Hala HTML sayfalarını biçimlendirmek için büyük CSS stylesheet'leri yöneten insanlar olduğundan eminim.

Bu gerçekten web sayfalarını tasarlamanın çok kötü bir yoludur. Kodlayici verimliligini öldürür çünkü sürekli olarak 2 dosya arasında atlarsınız.

Ancak, bu yaklaşımın en büyük sorunu bu değil. Bu yaklaşımın ana sorunu scope'dir.

CSS sayfalarının scopre zayifligi

Bir sayfada main olarak sınıflandırılmış 2 HTML öğeniz olduğunu varsayalım. Bir sayfada .main e bir stil uyguladığınızda, diğer sayfadaki diğer öğeyi yanlışlıkla stillemiş olursunuz. Bu bir felaket tarifi.

Bu geliştirme şekli ayrıca temizlenemeyen büyük miras kodlar oluşturdu. Örneğin, bir öğenizdeki main sınıfını kaldırmak istediğinizi varsayalım, böylece CSS dosyanızda .main gereksiz hale gelir.

Ancak, bu sınıfı CSS'inizden kolayca kaldıramazsınız, çünkü bu sınıf uygulandığı yer başka bir yerde olabilir.

Bu şekilde, kullanılmayan stiller stil sayfanızda birikmeye devam eder ve bir süre sonra yönetilmez hale gelir:

Tailwind Bizi Kurtarmaya Gelir

Tailwind ile, her şey artık HTML dosyası içinde yapılır, bu yüzden artık CSS dosyalarıyla ilgilenmeniz gerekmez. Kullandığınız framework doğrultusunda Tailwind'i kurun ve bu sayfadaki talimatları izleyin.

Tailwind'i kullanarak doğrudan stiller uygulayabilirsiniz. Ornegin, paragraf stilleme:

Tailwind'de HTML dosyasında yukarıdaki stilleri elde etmek son derece kolaydır, çünkü stiller Tailwind'de siniflar olarak temsil edilir.

Aşağıdaki kod yukarıdaki metinleri nasıl oluşturabileceğimizi gösteriyor.

<div class="flex flex-col gap-2">
	<p class="font-bold">Bu kalın yazılı bir paragraf</p>
	<p class="text-red-500">Bu kırmızı yazılı bir paragraf</p>
	<p class="italic">Bu italik yazılı bir paragraf</p>
	<p>Bu <span class="underline">karma</span> bir element</p>
</div>

Kolay gorunuyor degil mi? Bunlari uygulamak icin sadece Tailwind class syntax'ini bilmenix gerekir. Ve bu düşündüğünüz kadar zor değil.

Örneğin, font-bold bir metni kalın yaparken, italic sınıfı bir öğeyi italik yapar.

Yüzlerce sınıfı bilmeniz gerektiğini düşünebilirsiniz, çünkü uygulayabileceğiniz neredeyse sonsuz stiller vardır. Ancak bu kadar zor değil. Belirli bir stili uygulamak istediğinizde, Google'da Tailwind syntax'ını ararsınız ve kısa sürede alışırsınız.

Projelerimde Tailwind'i bir yıl kullandıktan sonra, artık bir stilin Tailwind syntax'ını nadiren aiyorum. Tailwind'in tutarlı syntax'ı kolay hatırlanır. Örneğin, aşağıdaki örneğe bir göz atın:

(Hiçbiri)

rounded-lg

rounded-3xl

rounded-full

rounded sınıfı bir öğenin kenar yarıçapını yönetir ve bunu lg, xl, full gibi ekler ekleyerek kolayca ayarlayabiliriz.

Neden Tailwind?

Gördüğünüz gibi, Tailwind HTML dosyanızı terk etmeden stil ayarlamayi çok kolay hale getirir. Bu, web geliştirme işini keyifli bir uygulama haline getirir.

Ayrıca, stil ayrıntılarına girmemenizi sağlar, çünkü stiller Tailwind tarafından zaten önceden belirlenmiştir, örneğin, border-radius: 10px veya font-size: 16px.

Örneğin, başlıklarım için text-lg ve font-bold kullanıyorum. Bu, ayrı bir CSS sayfasında bir sınıf tanımlamaktan ve onu düzenlemekten çok daha kolaydır.

Tailwind'i kullanma deneyiminiz varsa, en çok neyini sevdiğinizi/ sevmediğinizi bana bildirin. Henüz denemediyseniz, çok şey kaçırıyorsunuz. Yapmanız gereken tek şey, her ne yapıyorsanız durdurup npm install tailwindcss komutunu çalıştırmaktır.

Mutlu kodlamalar!