Tailwind CSS Pratik Kılavuzu: Modern ve Yanıt Veren Web Sayfaları Oluşturmak İçin Kapsamlı Bir Eğitim

Tailwind CSS nedir: Kullanışlılığı öncelikli bir CSS çerçevesidir.

Tailwind CSS, “işlevsellik öncelikli” bir CSS çerçevesidir ve Bootstrap, Foundation gibi bildiğimiz geleneksel çerçevelerle temel bir tasarım felsefesi farklılığına sahiptir. Geleneksel çerçeveler, belirli semantiklere sahip bir dizi önceden hazırlanmış bileşen sınıfı sunar. .btn、.cardGeliştiriciler, arayüzleri oluşturmak için bu bileşen sınıflarını birleştirirler. Tailwind ise, tek bir CSS özelliğine doğrudan karşılık gelen, çok sayıda ayrıntılı ve tek amaçlı kullanışlı sınıf (Utility Class) sunar.

Örneğin, 1rem iç boşluğa, mavi arka plana ve beyaz kalın yazıya sahip bir buton oluşturmak istiyorsanız, Tailwind’de HTML elemanına sadece bir sınıf adı eklemeniz yeterlidir. p-4 bg-blue-600 text-white font-boldHer sınıf adı, belirli bir stil görevini yerine getiren bir atom gibi davranır:p-4 İç boşluğu ayarlayın.bg-blue-600 Arka plan rengini ayarla.text-white Metin rengini ayarlamak için…font-bold Yazı kalınlığını ayarlayın. Bu yöntemin avantajı, çok sayıda özel CSS kodu yazmak ve bunları yönetmek için HTML dosyasından ayrılmanıza gerek kalmamasıdır. Tüm stiller, sınıf adları aracılığıyla doğrudan şablonlarda ifade edilir; bu da geliştirme hızını önemli ölçüde artırır ve stillerin tutarlılığını korur.

Temel Tasarım Felsefesi

Pratiklik öncelikli felsefenin temeli, “birleştirilebilirlik” ve “kısıtlamalar”dır. Tailwind, önceden belirlenmiş tasarım ölçütleri (aralıklar, renkler, yazı boyutları vb.) sunarak ekiplerin tasarımda tutarlı olmalarını sağlar. Geliştiriciler artık bir öğenin nasıl kullanılacağı konusunda endişelenmek zorunda kalmazlar. 16px Yine de. 18px İç boşluklar (padding) konusunda tartışıyorsanız, sadece çerçevenin (frame) sunduğu seçeneklere bakmanız yeterlidir. p-4 (1rem) veya p-5 (1.25rem) seçeneği arasından seçim yapılır. Bu, karar verme sürecindeki yorgunluğu büyük ölçüde azaltır ve sonuç olarak çok öngörülebilir, bakımı kolay bir stil kodu oluşturulur.

Tavsiye edilen okuma Tailwind CSS Başlangıç Kılavuzu: Sıfırdan Başlayarak Modern, Yanıt Veren Web Sayfaları Oluşturma。

Çevre Kurulumu ve Temel Ayarlar

Tailwind CSS’i kullanmaya başlamanın birçok yolu vardır, ancak en önerilen yöntem resmi PostCSS eklentisi aracılığıyla kurmaktır. Bu, JIT (Anında Derleme) modu ve tree shaking (ağaç sallama optimizasyonu) gibi özelliklerinden en iyi şekilde yararlanmanızı sağlar.

WordPress.com web sitesi oluşturma yardımcısı.

99.999% kullanılabilirlik + bölgeler arası felaket kurtarma, günün 24 saati destek, blog paketini satın alarak web sitesi oluşturmak için yapay zekanın ücretsiz kullanımı.

Bir yıl boyunca ücretsiz alan adı

WordPress.com web sitesi oluşturma yardımcısına erişin →

UltaHost Web Sitesi Oluşturma Asisti.

900+ ücretsiz, özelleştirilebilir şablon, web sitesi arama görünürlüğünü optimize etmek için gereken SEO yeteneklerini elde etmek için.

İndirim 40%.

UltaHost web sitesi oluşturma yardımcısına erişin →

Öncelikle, projeyi npm veya yarn kullanarak başlatın ve Tailwind ile ilgili bağımlılıkları yükleyin. Temel kurulum komutu şudur: npm install -D tailwindcss postcss autoprefixerDaha sonra, çalıştırın. npx tailwindcss init Bir yapılandırma dosyası oluşturun. tailwind.config.js。

在 tailwind.config.js Dosyada en önemli yapılandırma öğesi şudur: contentBurada, Tailwind’in hangi dosyaları tarayarak kullanılan sınıf adlarını bulması gerektiğini belirtmeniz gerekir. Böylece, üretim sırasında kullanılmayan stiller kaldırılır ve en küçük CSS dosyası oluşturulur. Tipik bir Vue veya React projesi için yapılandırma aşağıdaki gibidir:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ardından, bir ana CSS dosyası oluşturun (örneğin: src/index.css 或 src/styles/tailwind.css) ve Tailwind komutlarını ekleyin:

@tailwind base;
@tailwind components;
@tailwind utilities;

Son olarak, Vite veya Webpack gibi derleme araçlarınızın yapılandırmasında PostCSS ayarlarının doğru olduğundan emin olun ve bu CSS dosyasını projenizin giriş noktasına (entry point) ekleyin. Bu adımları tamamladıktan sonra, HTML dosyalarınızda veya bileşenlerinizde Tailwind’in kullanışlı sınıflarını kullanmaya başlayabilirsiniz.

Tavsiye edilen okuma Tailwind CSS Giriş Rehberi: Sıfırdan Başlayarak Modern ve responsive (uyumlu mobil cihazlara) arayüzler oluşturma。

Çekirdek Kullanışlı Sınıflar ve responsive (uyumlu) Tasarım

Tailwind’in sınıf kütüphanesi, CSS’nin her yönünü kapsar; düzenleme, aralıklar, tipografi gibi temel özelliklerin yanı sıra arka planlar, kenarlıklar, efektler gibi daha gelişmiş özellikleri de içerir. Adlandırma sistemi sezgiseldir ve düzenlidir; bu sayede öğrenilmesi ve hatırlanması kolaydır.

Düzenleme ve Aralık Sistemi (Layout and Spacing System)

Düzenleme sınıfları gibi… flex, grid, block, inline-block vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. vb. 0.25rem Katlar ölçeği. Örneğin,m-4 Göster. margin: 1rem，p-2 Göster. padding: 0.5remYön kullanımı t (Üst),r (right)b (Alt kısım),l (Sol)x (Yatay),y Dikey yönlendirmeyi belirtmek için, örneğin… mt-8, px-4。

Responsive Design Uygulaması

Tailwind’in duyarlı (reaktif) tasarımı, en güçlü özelliklerinden biridir. Framework, beş adet varsayılan kesme noktası (breakpoint) sunar:sm (640px)md (768px)lg (1024px)xl (1280px)2xl (1536px). responsive (duyarlı) stilleri uygulamak için, herhangi bir kullanışlı sınıfın (class) önüne bir “breakpoint” (kesme noktası) ön eki eklemeniz yeterlidir. Stiller, bu kesme noktasından itibaren etkin hale gelir ve üstteki stillerle birlikte üst üste gelir (yani birleşir).

Bluehost Web Sitesi Oluşturma Asisti.

Yapay zeka web sitesi oluşturma araçları, 7/24 çevrimiçi sohbet ve telefon desteği, bir yıllık ücretsiz alan adı, ücretsiz CDN ve ,991 uptime SLA sunuyoruz.

Bluehost'a erişin.

Örneğin, aşağıdaki kod, varsayılan genişlikte tam ekran bir öğe oluşturur; orta boyutlu ekranlardan daha büyük ekranlarda ise bu öğe konteynerin genişliğine uyum sağlar ve merkezlenir:

<div class="w-full md:max-w-2xl md:mx-auto p-4">
  <!-- 内容 -->
</div>

Bu “mobil öncelikli” yaklaşım, öncelikle küçük ekranlar için stil tasarladığınızı (önekli sınıflar kullanmadan) ve ardından bunu diğer cihazlar için uyarladığınızı ifade eder. md:、lg: Önekler kullanarak daha büyük ekranlar için stilleri örtebilir veya ekleyebilirsiniz; bu da karmaşık, duyarlı (responsive) arayüzler oluşturmayı son derece basit ve anlaşılır hale getirir.

Gelişmiş Özellikler: Üzerine Gelme, Odaklanma ve Özelleştirme

Temel duyarlı (responsive) özelliklerin yanı sıra, Tailwind, geçiş efektleri (hover), odaklanma (focus), etkinleştirme (activation) gibi duruma bağlı stilleri de “Variant” (Çeşitler) aracılığıyla destekler.

Tavsiye edilen okuma Tailwind CSS’e Giriş ve Uygulamaları: Sıfırdan Modern, Yanıt Veren Web Siteleri Oluşturma。

Durum varyantları

İlgili durumun stilini uygulamak için sınıf adının önüne doğrudan bir durum önek ekleyebilirsiniz. Örneğin,hover:bg-blue-700 Fare üzerine geldiğinde daha koyu mavi bir arka plan uygulanacaktır.focus:ring-2 focus:ring-blue-500 Bir elemana odaklandığında mavi bir halka şeklinde bir kontur eklenir; bu, formların erişilebilirliğini artırmak için çok faydalıdır. Diğer yaygın kullanılan varyasyonlar da bulunmaktadır. active:, disabled:, group-hover:(Babaya tıklanıp üzerinde fare gezdirildiğinde etkinleşir) vb.

Özelleştirilmiş Temalar ve Eklentiler

Tailwind, zengin bir dizi varsayılan tasarım ölçeği sunsa da, bunları tamamen kendi ihtiyaçlarınıza göre özelleştirebilirsiniz. tailwind.config.js Dosyaların theme.extend Bazı bölümlerde, konu değerlerini ekleyebilir, değiştirebilir veya silebilirsiniz.

hosting.com

Ücretsiz SSL, Cloudflare CDN, WAF, 40+ global veri merkezi seçeneği, daha düşük gecikme süresi ve 7/24 destek ile şimdi 671 TB'ye kadar maliyeti tasarruf edebilirsiniz. Ayrıca, yapay zeka oluşturma ve SEO optimizasyonunu da destekliyor.

Hosting.com'u ziyaret edin.

Örneğin, bir marka rengi ve daha geniş bir aralık ölçeği eklemek istiyorsanız:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#3a86ff',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Daha sonra, bunu kullanabilirsiniz. bg-brand 和 w-128 İşte böyle bir sınıf. Ayrıca, Tailwind aktif bir eklenti ekosistemine sahiptir ve resmi olarak sağlanan eklentileri yükleyerek yeni, kullanışlı sınıflar ekleyebilirsiniz. @tailwindcss/forms Eklentiler, form elemanlarını daha iyi bir şekilde güzelleştirebilir.

Özetle.

Tailwind CSS, pratik ve önceliklere dayalı bir yaklaşımı sayesinde geliştiricilerin stil yazma ve yönetme şeklini tamamen değiştirdi. Stil kararlarını CSS dosyalarından HTML şablonlarına taşıyarak, kısıtlayıcı ve birleştirilebilir atomik sınıflar aracılığıyla çok yüksek bir geliştirme verimliliği ve mükemmel bir tasarım tutarlılığı sağlar. Dahili olarak sunulan duyarlı (responsive) sistem ve durum değişkenleri (state variables), modern, etkileşimli web arayüzleri oluşturmayı sezgisel ve verimli hale getirir. Başlangıçta bazı sınıf adlarını ezberlemeniz gerekebilir; ancak adlandırma desenine aşina olduktan sonra geliştirme hızınızda kaliteli bir artış göreceksiniz. Hızlı geliştirme, ekip işbirliği ve tasarımın sistematikleştirilmesini hedefleyen projeler için Tailwind CSS, şüphesiz çok değerli ve güçlü bir araçtır.

Sıkça Sorulan Sorular.

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

Hayır, bu tam da Tailwind’in temel avantajlarından biridir. Üretim ortamında derleme yapılırken, Tailwind PurgeCSS’i (veya JIT motorunun yerleşik optimizasyonlarını) kullanarak projenizin dosyalarını titizlikle tarar ve yalnızca gerçekten kullanılan sınıf adlarına karşılık gelen CSS dosyalarını paketler. Sonuç olarak oluşturulan CSS dosyası genellikle sadece birkaç KB ila onlarca KB arasındadır; bu da birçok geleneksel çerçevenin veya elle yazılmış CSS kodlarının oluşturduğu CSS dosyalarından çok daha küçüktür.

Ekip projelerinde, HTML içinde birçok sınıf adının yazılması durumu karışık görünebilir mi?

Bu gerçekten de sık karşılaşılan bir endişe. Uygulamalar gösteriyor ki, makul satır sonlandırmaları ve sıralamalar yaparak (Prettier eklentisi ile otomatik olarak biçimlendirme yapılabilir), sınıf adları listelerinin okunabilirliği korunabilir. Daha da önemlisi, bu tür bir “karışıklık” yerel ve belirgindir; bu da geleneksel CSS’deki stil tanımları ile stil uygulamalarının ayrılmasından kaynaklanan “geçiş maliyetlerini” ve olası genel stil çatışmalarını önler. Birçok ekip, bu tür açık ve yerel “karışıklığın”, gizli ve genel “düzenlilikten” daha kolay bakım yapılabilir olduğunu düşünmektedir.

Tailwind CSS, React, Vue gibi bileşen kitaplıklarıyla birlikte kullanım için uygun mu?

Çok uygun; hatta mükemmel bir eşleşme diyebiliriz. React veya Vue bileşenlerinde, bir dizi Tailwind sınıfını yeniden kullanılabilir bir stil bileşeni olarak çıkarabilirsiniz. Örneğin, bir buton bileşeni içinde gerekli tüm Tailwind sınıfları barındırılır ve dışarıya sadece basit prop’lar (özellikler) arayüzü sunulur. Bu sayede hem Tailwind’in hızlı prototip geliştirme avantajlarından yararlanılır hem de bileşen seviyesinde soyutlama ve yeniden kullanılabilirlik korunur. Aynı zamanda, JIT (Just-In-Time) modunun sayesinde, sınıf adları dinamik olarak birleştirilse bile Tailwind bunları doğru bir şekilde işler.

Üçüncü parti bileşenlerin stillerini nasıl değiştirebilirim?

Üçüncü taraf UI bileşen kütüphaneleri kendi stilleriyle birlikte kullanıldığında, Tailwind’in pratik sınıfları yüksek özgüllükleri sayesinde genellikle bileşenin yerleşik stillerini veya varsayılan sınıflarını kolayca geçersiz kılabilir. Yapmanız gereken, bileşene kendi Tailwind sınıflarınızı eklemektir. Eğer yeterli özgüllük sağlanamıyorsa, Tailwind’in bazı özel özelliklerinden yararlanabilirsiniz. !important Modifikatörler, sınıf adının ardına eklenir. !Örneğin, bg-red-500!Ancak bu, son çare olarak ve dikkatli bir şekilde kullanılmalıdır. Daha iyi bir yaklaşım, söz konusu üçüncü parti bileşeni doğrudan yapılandırmak veya değiştirmenin mümkün olup olmadığını incelemektir.