Tailwind CSS Nedir? Neden Tailwind CSS Kullanmalıyım?

Severek, beğenerek kullandığım bir CSS kütüphanesini siz değerli Rokito severler ile paylaşmak istedim.

Başlamadan; çayınızı veya kahvenizi kapmanızı, arkaya chill bir müzik açmanızı tavsiye ederim. Hem öğrenelim, hem keyif yapalım.

O zaman; başlayalım başlayalım başlayalım...

Tailwind CSS Nedir?



Tailwind CSS, Adam Wathan tarafından oluşturulmuş, CSS yazmaya gerek duymayacağınız, tüm CSS özelliklerinin class olarak tanımlandığı ve JIT ile gerçek zamanlı derlemeye sahip bir CSS kütüphanesidir.

"Yazar burada ne demek istemiş?"

Sakin sakin, çok basit; örnekle devam 👇

CSS:

`<header class="header">...</header>` HTML kodu için `.header { display: flex }` olarak CSS yazarız.

Tailwind CSS:

`<header class="flex">...</header>`

Aynen; bu kadar hızlı ve basit. Basit demişken. HTML üzerinden Tailwind CSS yazarken, tüm değerleri (`flex, items-center, text-center, text-blue-600, animation, ring, vb.`) ezberlemenize, her değer için Tailwind CSS Döküman sayfasını açmanıza gerek de yok. Visual Studio Code için, Tailwind CSS IntelliSense isimli bir eklentisi mevcut. (VSCode kullanıcıları bunu şimdiden beğendi.)

Ekran görüntüsünü de bırakalım ki yeni başlayan arkadaşlar net olarak anlasın.


Bonus: Headwind (Tailwind CSS class derleyici.) + Tailwind Shades (Tailwind CSS renk paleti oluşturucu.)

Tailwind CSS'i anlatmaya Rikoto'nun konu karakter limiti yetmeyeceği ve siz Rokito severleri daha fazla sıkmamak adına Tailwind CSS sayfasından tüm özelliklerine ulaşabilirsiniz.

Yazının bundan sonrası, neden Tailwind CSS kullanılması için olacak. İlgi duyanlar kazanıyor, devam edelim.

Neden Tailwind CSS Kullanmalıyız?

Çok basit:

- İşimizi kolaylaştırıyor.
- CSS için HTML `class` tanımlama derdinden kurtarıyor. (BEM ve SMACSS bunun için yakar.)
- Gereksiz CSS oluşmasının önüne geçerek performans artışı sağlıyor.

Doğrudur Rokito severler. CSS adına yapılmış bir devrim. Bir çok "baba" diye nitelendirilen web siteleri kullanıyor ve her geçen gün kullanımı hızla artıyor.

Son

Biliyorum çayınız veya kahveniz bitti, artık saçma müzikler de çalmaya başladı. Benden bu kadar.

Merak ettiğiniz her şey için yorumlara bekliyorum. İlk günden beri biriken deneyimim sizler için hazırdır.

Unutmadan; çizimden veya geçiş yapmak isteyenler için DM açıktır.

Hoşça kalın.

Tailwind ile tabii ki çok hızlı html çıkartabilirsiniz, fakat bu html'i 3 gün sonra açtığınızda içinde kaybolursunuz Kesinlikle tavsiye edilmez

@Anathory; en büyük ön yargılardan birisi olduğunu belirtmek isterim. Her dilin bir yazım stili vardır. Prettier veya diğer derleyicileri kullanabilirsiniz. Ruler önerim 80, 100 veya en fazla 120 olabilir. Tailwind CSS geliştiricileri genelde 100 kullanıyor.

Örnek yazım stili için görseli inceleyebilirsiniz.

Tailwind'ı bilen adam kesinlikle içinde kaybolmaz. Bilmeyen adam içinde kaybolur.

Bu arada TailwindCSS candır.

Tailwind mi Bootstrap mı ?

@Kuajsu; ikisinide yoğun olarak kullandım. Şu an için kesiklikle Tailwind CSS seçerim. Her şeyi geçtim, Tailwind CSS ile kullanılmayan hiç CSS bulunmayacak.

HTML içinde HTML yazılmalıdır, şu görüntü göze hiç hoş gelmiyor. Ön yargı değil, kullandığım için biliyorum Front endle uğraşıp belli bir seviye kat etmiş kimse attığınız fotoyu bir fayda olarak görmeyecektir.

Bu tailwind'e özel bir şey değil, PurgeCSS kullanarak bootstrap'de de pure css de de aynı sonucu elde edebilirsiniz.

Front-end olarak on dört, back-end olarak sekiz yıllık deneyimim var. Foundation CSS, Bootstrap, vb. tüm kütüphaneleri yıllarca kullandım ve gelişmeleri için PR gönderdim. Tailwind CSS'den çok Bootstrap kullanmışlığım vardır. Hiçbiri Tailwind CSS'in sunduğunu sunmuyor. Tailwind CSS v3 ile de diğerlerini unutacağımızı dönüşüyorum. Hatta, ileride tarayıcılar üzerinde varsayılan olarak geleceği konuşuluyor.

PurgeCSS ile Tailwind CSS purge çalışması çok farklı. Bootstrap component'ler ile oluşuyor, Tailwind CSS property'ler ile oluşuyor. Birinde component'ler purge ediliyor, diğerinde property'ler. Yani Tailwind CSS ile nokta atışı purge işlemi gerçekleşiyor ve dahili olarak.