Tailwind CSS

Tailwind CSS, bir sayfayı doğrudan HTML içine yazılan küçük ve tek amaçlı sınıflarla stillendiren, utility öncelikli bir CSS framework'üdür. p-4, text-center ve bg-blue-500 gibi sınıfların her biri tek bir stil belirler. Geliştiriciler bu sınıfları birleştirerek fazla özel CSS yazmadan her türlü tasarımı oluşturur.

Utility öncelikli CSS, her bileşen için özel bir sınıf yazmak yerine her biri tek bir iş yapan çok sayıda küçük sınıftan tasarım oluşturmak demektir. Bir düğme görünümünü dolgu, renk, köşe yuvarlaklığı ve yazı kalınlığı sınıflarından alır. Bu yaklaşım stilleri işaretlemeye yakın tutar ve sürekli büyüyen büyük stil dosyalarını önler.

Geliştiriciler Tailwind CSS'i seçiyor, çünkü stillendirmeyi hızlandırır ve son CSS dosyasını küçük tutar. Her değişiklik için sınıf adı uydurmaya ya da HTML ile CSS dosyaları arasında gidip gelmeye gerek kalmaz. Tailwind CSS ayrıca boşluklar, renkler ve yazı boyutları için tutarlı bir ölçek sunar, bu da tasarımı derli toplu tutar.

Tailwind CSS özel bir tasarım oluşturmak için alt düzey utility sınıfları sunarken, Bootstrap gezinme çubukları, kartlar ve modallar gibi hazır bileşenler sunar. Bootstrap, az tasarım çalışmasıyla standart bir görünüm için daha hızlıdır. Tailwind CSS ise bir projenin varsayılan bir temayla uğraşmadan kendine özgü bir tasarıma ihtiyaç duyduğu durumlarda daha iyidir.

Tailwind CSS npm üzerinden kurulur ve projenin Vite, PostCSS ya da Tailwind CLI gibi derleme aracına bağlanır. Tailwind CSS sürüm 4'te paketi ekler, ardından ana CSS dosyanızın en üstünde @import "tailwindcss" ile içe aktarırsınız. Resmi kurulum rehberinde Laravel, Next.js ve Vite dahil her yaygın framework için kısa adımlar bulunur.

Tailwind CSS, margin, padding, flexbox ve grid gibi temel CSS özelliklerini zaten anlayan yeni başlayanlar için uygundur. Her Tailwind sınıfı gerçek bir CSS özelliğine karşılık gelir, bu yüzden önce CSS öğrenmek sınıfları okumayı kolaylaştırır. CSS temellerini atlayan yeni başlayanlar Tailwind CSS'te düzenleri düzeltmekte çoğu zaman zorlanır.

CSS bilen çoğu geliştirici birkaç gün içinde Tailwind CSS ile verimli çalışmaya başlayabilir. Sınıf adları net kalıpları izler, bu yüzden bir sınıf grubunu öğrenmek geri kalanını tahmin etmeye yardımcı olur. Duyarlı varyantlarda, özel temalarda ve bileşen kalıplarında ustalaşmak birkaç haftalık gerçek kullanım gerektirir.

Tailwind CSS'te duyarlı tasarım, herhangi bir utility sınıfının önüne sm:, md: ve lg: gibi kırılma noktası önekleri eklenerek çalışır. Tailwind CSS mobil önceliklidir, bu yüzden öneksiz bir sınıf tüm ekranlara, önekli bir sınıf ise o kırılma noktasından itibaren yukarıya uygulanır. Örneğin text-sm md:text-lg telefonlarda küçük, daha geniş ekranlarda daha büyük metin verir.

Tailwind CSS'in varsayılan kırılma noktaları 640 pikselde sm, 768 pikselde md, 1024 pikselde lg, 1280 pikselde xl ve 1536 pikselde 2xl'dir. Her kırılma noktası bir minimum genişliktir, bu da Tailwind'in mobil öncelikli yaklaşımıyla örtüşür. Bir proje tema ayarlarında bu değerleri değiştirebilir ya da yeni kırılma noktaları ekleyebilir.

Tailwind CSS'te karanlık modu, dark:bg-gray-900 gibi herhangi bir sınıfın önüne dark: öneki koyarak eklersiniz. Varsayılan olarak Tailwind CSS ziyaretçinin işletim sistemi ayarını izler. Kullanıcıların karanlık modu bir düğmeyle değiştirmesine izin vermek için dark varyantını sayfadaki bir sınıfa ya da data özniteliğine bağlı olacak şekilde yapılandırırsınız.

Tailwind CSS sürüm 4'te renkleri ve fontları, ana CSS dosyanızdaki bir @theme bloğu içinde CSS değişkenleriyle özelleştirirsiniz. --color-brand gibi bir değişken, bg-brand ve text-brand gibi sınıfları otomatik olarak oluşturur. Eski sürümler aynı iş için bir tailwind.config.js dosyası kullanıyordu ve bu yaklaşım sürüm 4'te bir uyumluluk seçeneğiyle hâlâ çalışır.

Tailwind CSS, bir öğe çok sayıda sınıf taşıyabildiği için HTML'in kalabalık görünmesine yol açabilir. Çoğu ekip bunu, tekrar eden kalıpları kullandıkları framework'te Blade, React ya da Vue bileşeni gibi bileşenlere dönüştürerek çözer. Bunun karşılığında stiller işaretlemenin hemen yanında görünür kalır, bu da değişiklikleri hızlı ve güvenli hale getirir.

Tailwind CSS, projenin dosyalarını tarayıp yalnızca gerçekten kullanılan sınıfları üreterek CSS dosyasını küçük tutar. Kullanılmayan utility'ler son stil dosyasına hiç ulaşmaz. Tailwind CSS ile oluşturulan tipik bir canlı ortam CSS dosyası, büyük siteler için bile küçüktür.

Tailwind CSS'te @apply direktifi, Tailwind utility sınıflarını kendi CSS kurallarınızın içinde kullanmanızı sağlar. Bir metin editörünün ürettiği HTML gibi kontrol etmediğiniz içerikleri stillendirmek için kullanışlıdır. Tailwind ekibi, stilleri yeniden kullanmanın genellikle daha temiz yolu bileşenler olduğu için onu ölçülü kullanmayı önerir.

Evet, Tailwind CSS Laravel ile iyi çalışır ve yeni Laravel projeleri onu Vite ile kullanacak şekilde kurulu gelir. Tailwind sınıflarını Blade şablonlarına yazarsınız, Vite de son CSS'i derler. Laravel'in başlangıç kitleri de giriş ve panel ekranlarında Tailwind CSS kullanır.

Evet, Tailwind CSS React, Vue, Svelte ve diğer JavaScript framework'lerinin çoğuyla çalışır. Sınıflar bileşenin işaretlemesine React'te className, Vue'da class ile yazılır. Her bileşen kendi sınıflarını tuttuğu için Tailwind CSS bileşen tabanlı framework'lerle iyi uyum sağlar.

Tailwind CSS'in arama sıralamasına doğrudan bir etkisi yoktur, ancak CSS dosyasını küçük ve sayfaları hızlı tutarak SEO'ya dolaylı olarak yardımcı olabilir. Sayfa hızı, Google'ın sayfa deneyimi sinyallerinin bir parçasıdır. İçerik, sayfa yapısı ve HTML anlamsallığı yine de stil aracından çok daha önemlidir.

Tailwind CSS'te arbitrary değerler, temada bulunmayan kesin bir değeri köşeli parantez içinde yazarak kullanmanızı sağlar. Örneğin w-[37%] ya da top-[117px] o kesin değer için anında bir sınıf oluşturur. Arbitrary değerler tek seferlik durumlar için kullanışlıdır, ancak sık kullanılan bir değerin yeri temadır.

Tailwind CSS'te hover ve focus durumları, bir utility sınıfının önüne hover:, focus: veya active: gibi bir durum öneki eklenerek çalışır. Örneğin bg-blue-500 hover:bg-blue-600, fare üzerine geldiğinde bir düğmeyi koyulaştırır. Önekler md:hover:underline gibi kırılma noktaları ve karanlık modla birleştirilebilir.

Hayır, Tailwind CSS'in kendisi modallar ya da gezinme çubukları gibi hazır bileşenleri değil, yalnızca utility sınıflarını içerir. Hazır bileşenler resmi Tailwind Plus ya da daisyUI ve Flowbite gibi topluluk kütüphaneleri gibi ayrı koleksiyonlardan gelir. Birçok ekip utility'lerin üzerine kendi küçük bileşen setini kurar.

Evet, Tailwind CSS rtl: ve ltr: varyantları ile mantıksal utility sınıfları üzerinden sağdan sola düzenleri destekler. ms-4 ve pe-2 gibi mantıksal sınıflar dolgu ve kenar boşluğunu satırın başına ya da sonuna uygular, bu yüzden Arapçada otomatik olarak yön değiştirir. Bu da tek bir işaretleme setinin hem İngilizce hem Arapça sayfalarda çalışmasını sağlar.

Tailwind CSS sürüm 4, yapılandırmayı @theme bloğu ve tek bir @import satırıyla CSS'in içine taşıdı. Sürüm 4 ayrıca daha hızlı bir derleme motoru, içerik dosyalarının otomatik algılanması ve cascade layers gibi modern CSS özellikleri getirdi. Sürüm 3'ten yükselten projelerin çoğu, kodlarını güncellemek için resmi yükseltme aracını kullanabilir.

Bir proje neredeyse hiç özel tasarım olmadan eksiksiz bir hazır bileşen setine ihtiyaç duyduğunda ya da ekip klasik CSS yazmayı tercih ettiğinde Tailwind CSS'i istemeyebilirsiniz. Birkaç stili olan küçük bir statik sayfanın hiç framework'e ihtiyacı olmayabilir. Tailwind CSS en çok, büyümeye devam eden özel tasarımlı projelerde karşılığını verir.

Tailwind CSS sınıflarını, tekrar eden kalıpları bileşenlere dönüştürerek ve sınıfları tutarlı bir sırayla dizerek düzenli tutarsınız. Tailwind CSS için resmi Prettier eklentisi, kaydetme sırasında sınıfları otomatik olarak sıralar. Marka renklerini ve boşlukları temada tanımlamak da sınıfları kısa ve tutarlı tutar.

Evet, Tailwind CSS MIT lisansıyla açık kaynaktır, bu yüzden kişisel ve ticari projelerde kullanılabilir. Lisans, Tailwind CSS'i herhangi bir üründe kullanmaya, değiştirmeye ve dağıtmaya izin verir. Kaynak kodu GitHub'da herkese açıktır, isteyen herkes okuyabilir ve sorun bildirebilir.