Tailwind CSS Nedir? Uygulama Geliştirenler İçin Sade Bir Rehber

Tailwind CSS, web sitelerini biçimlendirmek için bir araç setidir. Her öğeye ayrı bir stil dosyasında kurallar yazmak yerine, kısa ve hazır sınıf adları verirsiniz — beyaz arka plan için bg-white, iç boşluk için p-4, daha büyük yazı için text-lg, yuvarlatılmış köşeler için rounded-xl — ve Tailwind tarayıcının ihtiyaç duyduğu CSS'i üretir. Ücretsiz ve açık kaynaklıdır ve modern web uygulamalarının en yaygın biçimlendirme yollarından biridir.

Yapay zekayla geliştirirken Tailwind neden önemli

Bir yapay zeka uygulama oluşturucuyla web uygulaması yapıyorsanız, uygulamanızın büyük olasılıkla Tailwind ile biçimlendirildiğini görürsünüz. Örneğin Mythex, siz başka bir şey istemedikçe yeni projelere Vite + React + TypeScript + Tailwind ile başlar (teknolojinin nasıl seçildiği).

Bu sizin için üç açıdan önemlidir:

• Tasarım değişiklikleri ucuzdur. Biçimlendirme her düğmenin, kartın ve başlığın hemen yanında durduğu için, yapay zeka “kartları daha az kalabalık yap” isteğini tek bir yerde birkaç sınıf adını düzenleyerek yerine getirebilir.
• Okuyabilirsiniz. Tailwind sınıfları düz İngilizceye yakındır. text-center font-bold text-2xl ifadesini, hiç kod yazmamış olsanız bile çözmek zor değildir.
• Görünüm tutarlı kalır. Tailwind, sabit bir boyut, boşluk ve renk ölçeği sunar. Bu, bir uygulamanın 14 hafif farklı gri tonuna bulaşmasını önler.

Günlük bir benzetme

Boya ve ev yapımını düşünün.

Düz CSS, her duvar için kendi boyanızı karıştırmak gibidir. Tam özgürlüğünüz vardır, ama bir süre sonra oturma odası “sıcak beyaz”, koridor “biraz daha sıcak beyaz” olur ve kimse nedenini hatırlamaz.

Tailwind ise bir boya mağazasının renk kartelası ve etiketli çıkartmalar gibidir. Her duvarda bir çıkartma vardır — “beyaz, mat, 2 kat” — ve kartela yalnızca özenle seçilmiş bir tonlar kümesi sunar. Biraz özgürlükten vazgeçersiniz, ama işteki herkes her çıkartmayı okuyarak duvarın tam olarak nasıl görünmesi gerektiğini bilir.

Tailwind nasıl çalışır

Bir web sayfası HTML (içerik ve yapı) ve CSS (görünüm) ile oluşturulur. Normalde CSS, şuna benzer kurallarla ayrı bir dosyada durur:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind ile bu kuralı yazmazsınız; yardımcı sınıfları doğrudan öğenin üzerine koyarsınız:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Rezervasyonunuz onaylandı
</div>

Her sınıf küçük bir iş yapar. Uygulama derlendiğinde Tailwind dosyalarınızı tarar, kullandığınız sınıfları bulur ve yalnızca onlar için CSS üretir. Bu, nihai stil sayfasını küçük tutar.

Mevcut ana sürüm olan Tailwind 4, çok az yapılandırmayla kurulur: kurarsınız, eklentisini derleme aracınıza eklersiniz ve CSS dosyanızın en üstüne @import "tailwindcss"; yazarsınız. Marka renkleri ve yazı tipleri gibi özelleştirmeler, eski sürümlerin gerektirdiği büyük bir JavaScript yapılandırma dosyası yerine CSS içinde tasarım belirteçleri olarak tanımlanır. tailwind.config.js geçen eski bir eğitim okuyorsanız, nedeni budur.

Çalışılmış bir örnek: bir fiyatlandırma kartı

Diyelim ki yapay zekadan bir fiyatlandırma sayfası istediniz ve “Pro” kartının öne çıkmasını istiyorsunuz. Kartın kodu şöyle olabilir (bir React bileşeninde class, className olarak yazılır):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Denemeyi başlat
  </button>
</div>

Soldan sağa okuyarak:

“Pro kartını mavi bir kenarlık ve hafif bir gölgeyle öne çıkar” derseniz, yapay zeka border-gray-200 yerine border-2 border-blue-600 yazabilir ve shadow-lg ekleyebilir. Değişiklik bu kadar.

Duyarlı tasarım ve karanlık mod

Tailwind, ekran boyutları ve durumlar için kısa önekler sunar:

• md:grid-cols-3 — orta ve daha büyük ekranlarda üç sütun; telefonda varsayılan tek sütun geçerlidir. Tailwind mobil önceliklidir: öneksiz sınıflar her yerde geçerlidir, önekler daha büyük ekranlar için değişiklik ekler.
• hover:bg-gray-700 — fare üzerindeyken daha koyu bir düğme.
• dark:bg-gray-900 — karanlık mod açıkken farklı bir arka plan.

Bu yüzden bir Tailwind projesinde mobil uyumlu bir düzen ya da karanlık mod istemek genellikle hızlıdır.

Temel terimler

Sık yapılan yanlış anlamalar

• “Tailwind bir tasarımdır.” Değildir. Tailwind bir görünüm değil, yapı taşları sunar. İki Tailwind sitesi tamamen farklı görünebilir. Genel “yapay zeka uygulaması görünümü” Tailwind'den değil, varsayılanlardan gelir; oluşturucunuza gerçek bir yön verin. Bkz. yapay zekayla iyi görünümlü bir uygulama nasıl tasarlanır.
• “Satır içi stillerle aynıdır.” Tam olarak değil. Sınıflar ortak bir ölçekten gelir, hover, karanlık mod ve kırılma noktalarını destekler ve derleme sırasında sıradan CSS'e dönüşür.
• “Tailwind sayfaları ağırlaştırır.” Derleme yalnızca kullandığınız sınıfları içerir; bu yüzden ziyaretçilere gönderilen CSS genellikle küçüktür.
• “Uzun sınıf listeleri düzensiz kod demektir.” İlk bakışta kalabalık görünürler, ama bir öğenin görünümüyle ilgili her şey tek bir yerdedir. Tekrar eden kalıplar genelde tek bir Button gibi yeniden kullanılabilir bileşenlere alınır.
• “Tailwind kullanırsam özel CSS yazamam.” Gerektiğinde yine düz CSS yazabilirsiniz.

Yapay zeka oluşturucunuzdan ne istemelisiniz

• “Marka renklerimizi ve yazı tiplerimizi bir kez tema belirteci olarak tanımla ve sabit kodlanmış renkler yerine her yerde kullan.”
• “Her kart, düğme ve giriş alanı aynı köşe yarıçapını ve boşluğu kullansın.”
• “Düzeni telefon genişliğinde kontrol et; taşan ya da dokunmak için çok küçük olan her şeyi düzelt.”
• “Tailwind'in dark: varyantını kullanarak karanlık mod ekle ve metin kontrastının okunabilir kalmasını sağla.”
• “Tekrar eden düğme stillerini tek bir yeniden kullanılabilir Button bileşeninde topla.”
• “Bu bölümdeki Tailwind sınıflarını sade bir dille açıkla.”

Mythex'te Tailwind

Yeni Mythex projeleri varsayılan olarak Tailwind kullanır; birlikte React ve TypeScript ile gelir. Böylece görsel değişiklikleri sade sözcüklerle isteyip canlı Önizlemede görebilirsiniz. Kodu görmek isterseniz kod düzenleyici her sınıfı gösterir (Free'de salt okunur, Pro'da düzenlenebilir). Düz CSS ya da farklı bir kurulum tercih ediyorsanız, ilk isteminizde bunu söyleyin — dokümantasyon, yığının nasıl seçildiğini anlatır.

Sorular