Tailwind CSS Kılavuzu: Temelden İleri Seviyeye Kadar Pratik Bir Giriş Rehberi

什么是 Tailwind CSS

Tailwind CSS, işlevselliği öncelikli bir CSS çerçevesidir ve geleneksel UI çerçeveleri (örneğin Bootstrap) ile temelde farklıdır. Geleneksel çerçeveler, butonlar, kartlar ve navigasyon çubukları gibi önceden oluşturulmuş bileşenler sunar ve sizin yapmanız gereken sadece ilgili sınıf adlarını eklemektir. Ancak Tailwind CSS, ince ayarlanmış ve işlevsel CSS araç sınıfları sunar; bu sınıfları birleştirerek herhangi bir tasarımı doğrudan oluşturabilirsiniz.

Temel fikri, bir dizi önceden tanımlanmış araç sınıfı kullanarak stilleri gerçekleştirmektir; bu da geleneksel CSS veya SCSS’te her eleman için özel stiller yazmaktan kaçınmayı sağlar. Örneğin, köşeleri yuvarlak, arka plan rengi ve iç boşluğu olan bir buton oluşturmak istiyorsanız, sadece HTML elementinde gerekli ayarları yapmanız yeterlidir. class Özniteliklere birleştirilerek eklenir. rounded-lg、bg-blue-500、text-white 和 p-4 Bu sınıfların kullanımının avantajı, geliştirme sürecini büyük ölçüde hızlandırması, tasarım ile kod arasında tutarlılık sağlaması ve yalnızca gerçekten kullanılan stilleri içeren, yüksek derecede optimize edilmiş üretim dosyaları oluşturmasıdır.

Nasıl yüklenir ve yapılandırılır?

Tailwind CSS’yi projenize entegre etmenin birçok yolu vardır. En önerilen yöntem, onu bir PostCSS eklentisi olarak kullanmaktır; bu sayede derleme sürecinde tüm Tailwind stil ayarlarını kolayca yönetebilirsiniz.

NPM ve PostCSS kullanılarak yükleme yapılır.

Öncelikle, Tailwind ve bağımlılıklarını npm veya yarn kullanarak yükleyin. Daha sonra, Tailwind yapılandırma dosyasını oluşturmanız ve PostCSS ayarlarını belirlemeniz gerekiyor.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Başlatma komutunu çalıştırdığınızda, varsayılan bir yapılandırma dosyası oluşturulur. tailwind.config.jsBu dosyada, kritik bir yapılandırma öğesi şudur: contentBu aracılığıyla, projedeki hangi dosyaların Tailwind CSS sınıflarını içerdiğini belirtmeniz gerekiyor; böylece framework ilgili dosyaları tarayıp buna göre CSS kodu oluşturabilir.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {}
  },
  plugins: []
}

Kendi stil şemanızı oluşturun.

Ardından, ana CSS dosyanıza Tailwind’in komutlarını ekleyin.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Son olarak, derleme sürecinde Tailwind CLI bu girdi dosyasını işler, ayarladığınız şablon dosyalarındaki tüm sınıf adlarını tarar ve yalnızca gerekli stilleri içeren, optimize edilmiş bir CSS dosyası oluşturur. Derleme sürecini başlatmak için aşağıdaki komutu çalıştırabilirsiniz:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Temel Kavramlar ve Pratik Sınıflar

Tailwind CSS’yi verimli bir şekilde kullanabilmek için, adlandırma kurallarını ve duyarlı (reaktif) tasarım sistemini anlamak gereklidir.

Pratik Sınıf İsimlendirme Kuralları

Tailwind’in sınıf adları genellikle “özellik-değer” yapısındadır ve değerler, bir tasarım sisteminde önceden belirlenmiş ölçeklere karşılık gelir. Bu sayede sınıf adları çok anlaşılır ve hatırlanması kolaydır.

• Aralık:p-4 padding: 1rem;, m-2 (margin: 0.5rem).
• Metin:text-lg `(font-size: 1.125rem);`, font-bold (`font-weight: 700`).
• Renk:bg-red-500 `background-color`text-blue-700 (Renk).
• Düzenleme (Layout):flex, justify-center, items-center。
• Boyut:w-full (Genişlik: 100%), h-64 (Yükseklik: 16rem).

Tepkisel tasarım.

Tailwind, mobil cihazlara öncelik veren bir tasarım yaklaşımı benimsemektedir. Varsayılan pratik sınıflar, tüm ekran boyutları için (yani mobil cihazlar için) geçerlidir. Daha büyük ekranlar için (örneğin tabletler, masaüstü bilgisayarlar) stil eklemek istiyorsanız, yanıt veren (responsive) önekler kullanmanız gerekmektedir.

Örnek:
* text-centerMobil cihazlarda içeriği ortala.
* md:text-leftOrta boyutlu ekranlarda (≥768px) ve daha büyüklerinde, metin sol tarafa hizalanmalıdır.
* lg:text-xlBüyük ekranlarda (≥1024px) ve daha büyüklerinde daha büyük yazı boyutları kullanın.

Bu tasarım, basit önekler ekleyerek farklı noktalarda düzeni ve stilini ayarlamanıza olanak tanır.

Hover, Focus ve benzeri durum değişiklikleri (state variations)

Tailwind, çeşitli element durumları (örneğin üzerine gelindiğinde, odaklandığında, etkinleştirildiğinde, devre dışı bırakıldığında) için de varyasyon önekleri sunar. Bu sayede, ekstra CSS kodu yazmadan doğrudan sınıf adlarında etkileşim stillerini tanımlayabilirsiniz.

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 transition-colors">
  点击我
</button>

Yukarıdaki örnekte, düğünün üzerine gelindiğinde arka plan rengi daha koyu hale gelir, odak noktasına geçtiğinde bir odak halkası oluşur ve renk değişiminin pürüzsüz bir geçişi olur.

Gelişmiş Özellikler ve Özelleştirmeler

Temelleri öğrendiğinizde, Tailwind’in güçlü özelleştirme özellikleri geliştirme verimliliğinizi daha da artıracaktır.

Bileşenleri ve @apply komutunu çıkarın.

Her ne kadar doğrudan HTML içinde atomik sınıfları kullanmak Tailwind’in temel felsefesi olsa da, bazı sınıfların kombinasyonları projenizde sık sık tekrarlandığında (örneğin belirli bir stildeki butonlar için), bunları HTML içinde tekrar tekrar yazmak gereksiz yere uzun ve karmaşık hale gelebilir. Bu durumda, şu yöntemi kullanabilirsiniz: @apply Bu komut, CSS içinde bu atomik sınıfları özel bir CSS sınıfı olarak bir araya getirir.

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Daha sonra, bunu HTML içinde kullanabilirsiniz. class=”btn-primary” Bu, atomik sınıflar ile bileşenlerin sürdürülebilirliğini dengelemenin etkili bir yoludur.

Derinlemesine Tema Yapılandırması

Değişiklik yaparak. tailwind.config.js Dosyadaki theme Bir kısmında, Tailwind’in tasarım sistemini tamamen özelleştirebilirsiniz. Renkleri, yazı tipi ailelerini, aralık oranlarını, kırılma noktalarını, köşe yuvarlaklıklarını vb. kendinize göre ayarlayabilirsiniz. Bu sayede projenizin tutarlı bir tasarım standardına uymasını sağlarsınız.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1d4ed8',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Yapılandırmayı tamamladıktan sonra, özel sınıf adlarını hemen kullanmaya başlayabilirsiniz. bg-brand-blue 或 w-128。

Üçüncü parti eklentiler kullanmak

Tailwind’in eklenti sistemi, özelliklerini genişletmenize olanak tanır. Resmi veya topluluk tarafından sağlanan eklentileri yükleyerek yeni kullanışlı sınıflar veya bileşenler ekleyebilirsiniz. Örneğin, bir eklenti yükleyerek… @tailwindcss/forms 或 @tailwindcss/typography Eklentiler, form elemanlarına veya makale düzenlemesine daha iyi varsayılan stiller sağlayabilir.

Özetle.

Tailwind CSS, benzersiz “işlevsel sınıfların önceliği” metodolojisi sayesinde modern web geliştirmeye önemli ölçüde verimlilik ve esneklik katmaktadır. Sadece başka bir CSS çerçevesi değil; aynı zamanda yeni bir stil yazma yaklaşımı ve tasarım sistemi aracıdır. Hızlı prototip oluşturmaktan büyük, üretim seviyesindeki uygulamalara kadar, Tailwind’in yüksek özelleştirilebilirliği ve “sadece kullanılan CSS’yi oluşturma” özelliği sayesinde mükemmel bir geliştirme deneyimi ve üstün performans sunar. Temel pratik sınıflardan duyarlı tasarıma, bileşen çıkarımından derin tema özelleştirmelerine kadar her şeyi öğrendiğinizde, bu güçlü aracı tam olarak kullanarak verimli, tutarlı ve kolayca sürdürülebilir kullanıcı arayüzleri oluşturabilirsiniz.

Sıkça Sorulan Sorular.

Tailwind CSS tarafından oluşturulan CSS dosyaları çok mu büyük oluyor?

Hayır. Tailwind CSS, üretim modunda gelişmiş bir PurgeCSS özelliği kullanır (bu özellik V3 ve sonraki sürümlerde araçların içine entegre edilmiştir). Bu özellik, şablon dosyalarınızı otomatik olarak tarar ve kullanılmayan tüm CSS stil sınıflarını ortadan kaldırır. Sonuç olarak oluşturulan CSS dosyası genellikle çok küçüktür (10 KB’nin altına sıkıştırılabilir) ve yalnızca projenizin gerçekten kullandığı stilleri içerir.

HTML'de bu kadar çok sınıf adı yazmak, kodun bakımını zorlaştırmaz mı?

Bu, ilk kez bu konuyla karşılaşan kişilerin sıkça yaşadığı bir endişedir. Ancak pratikte gösterilmiştir ki, bu tür doğrudan bir ifade şekli aslında stillerin daha öngörülebilir ve bakımı daha kolay hale gelmesini sağlar. Artık stil kurallarını bulmak için HTML ve CSS dosyaları arasında gidip gelmenize gerek kalmaz; bileşenin stilleri, bileşenin hemen yanında, açıkça görülebilir bir şekilde yer alır. Yüksek derecede tekrarlanan stil kombinasyonları için ise… @apply Komutları bileşen sınıfları olarak çıkarın ve kodun DRY (Kendinizi Tekrarlamayın – Don’t Repeat Yourself) ilkesini koruyun. Birçok geliştirici, bunun geleneksel CSS yönetiminden daha verimli olduğunu belirtiyor.

Tailwind CSS, hangi ön uç (front-end) çerçeveleriyle birlikte kullanılmaya uygundur?

Tailwind CSS, herhangi bir çerçeveye bağımlı olmayacak şekilde tasarlanmıştır; bu sayede herhangi bir ön uç çerçevesi veya statik site oluşturucu ile mükemmel bir şekilde birlikte kullanılabilir. Sınıf adları sadece normal HTML öznitelikleridir, bu nedenle Vue.js, React, Angular, Svelte, Next.js, Nuxt.js, Gatsby, Astro gibi çerçeveler veya kütüphanelerle kolayca entegre edilebilir. Yapmanız gereken tek şey, çerçevenin şablon dosyalarını işlemek için PostCSS gibi derleme araçlarını doğru şekilde yapılandırmaktır.

Varsayılan stilleri nasıl özelleştirebilir veya genişletebilirsiniz?

Özelleştirmeler, Tailwind CSS’nin en önemli özelliklerinden biridir. Tüm özelleştirmeler, projenin kök dizininde bulunan dosyalarda yapılabilmektedir. tailwind.config.js Yapılandırma dosyasında işlemler tamamlandı. Artık bunu kullanabilirsiniz. theme.extend Yeni değerleri nesneye ekleyebilirsiniz (tüm varsayılan ayarların üzerine yazılmasını önlemek için önerilen bir yöntemdir). Ayrıca… theme Nesnelerde varsayılan değerler doğrudan değiştirilebilir. Renk, yazı tipi, aralık, kırılma noktaları, köşe yuvarlamları gibi neredeyse tüm tasarım sistemi ile ilgili değişkenleri kendinize göre ayarlayabilirsiniz. Resmi dokümantasyon, yapılandırma seçeneklerine dair ayrıntılı açıklamalar sunmaktadır.