Tailwind CSS Çince Uygulama Rehberi: Modern Tepkisel UI'leri Sıfırdan Oluşturma

什么是 Tailwind CSS

Tailwind CSS, işlevselliği öncelikli bir CSS çerçevesidir. Geliştiricilere, HTML içinde doğrudan ve hızlı bir şekilde özelleştirilmiş tasarımlar oluşturabilmeleri için bir dizi düşük seviyeli, birleştirilebilir ve pratik sınıf sunar. Bootstrap veya Bulma gibi geleneksel CSS çerçevelerinin aksine, Tailwind önceden tasarlanmış bileşenler (örneğin açılır menüler, navigasyon çubukları) sağlamaz; bunun yerine “Lego blokları” gibi kullanılabilen atomik sınıflar sunar. Bu sınıflar, CSS’nin belirli özelliklerine karşılık gelir. text-center Karşılık gelen text-align: center;，mt-4 Karşılık gelen margin-top: 1rem;Bu sınıfları birleştirerek, geliştiriciler özel CSS kodları yazmaya gerek kalmadan her türlü görsel tasarımı oluşturabilirler. Bu sayede yüksek derecede özelleştirme sağlanırken, aynı zamanda geliştirme verimliliği de büyük ölçüde artırılır.

Temel felsefesi “Kısıtlamalar özgürlük getirir”dir. Tailwind, aralıklar, renkler, yazı tipi boyutları gibi özenle tasarlanmış bir dizi tasarım sistemi sayesinde tasarım tutarlılığını sağlar. Aynı zamanda, yapılandırma dosyaları aracılığıyla da destek sunar. tailwind.config.js Bu tasarım sistemini tamamen özelleştirerek, herhangi bir marka stiline sorunsuz bir şekilde uyum sağlamasını sağlayabilirsiniz. Ayrıca, kullanılmayan stilleri temizleyerek Tailwind’in üretim sürümünü çok daha küçük boyutlarda tutabilir ve son kullanıcıların sayfa yükleme performansını optimize edebilirsiniz.

Çevre Kurulumu ve Proje Başlatma

Tailwind CSS’i kullanmaya başlamanın birçok yolu vardır; bunlar arasında CDN aracılığıyla, PostCSS kullanarak veya CLI (Komut Satırı Arayüzü) aracılığıyla gelir. Modern ön uç projeleri için en önerilen yöntem, PostCSS ile entegrasyondur. Çünkü PostCSS, en kapsamlı özellik setini sunar ve üretim optimizasyonlarını destekler.

Tavsiye edilen okuma Tailwind CSS’yi Öğrenin: Başlangıçtan Uzmanlığa Kadar Pratik Komponent Geliştirme Rehberi。

PostCSS kullanarak kurulum yapmak için aşağıdaki adımları izleyin:

Öncelikle, bir Node.js ortamına ihtiyacınız var. Bir proje başlatmak ve Tailwind’i kurmak için npm veya yarn kullanabilirsiniz. Yeni bir proje için genellikle gereken paketleri npm ile yüklemek en yaygın yöntemdir. Kurmanız gerekenler: tailwindcss Kendisi ve ayrıca… postcss 和 autoprefixerÇünkü Tailwind, bir PostCSS eklentisidir.

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 →

npm init -y
npm install -D tailwindcss postcss autoprefixer

Bundan sonra, çalıştırın. npx tailwindcss init Tailwind CSS için yapılandırma dosyası oluşturmak için komut: tailwind.config.jsAynı zamanda, bir PostCSS yapılandırma dosyası da oluşturmanız gerekecek. postcss.config.jsVe bunun içinde Tailwind ve autoprefixer’ı yapılandırın.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Tailwind CSS stilini projeye dahil etmek

Yükleme işlemi tamamlandıktan sonra, projenizin CSS giriş dosyasına Tailwind’in komutlarını eklemeniz gerekiyor. Genellikle bu dosya “style.css” adıyla adlandırılır. src/styles.css 或 input.css。

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

@tailwind base Bu komut, Tailwind’in temel stillerini sayfaya enjekte eder, tarayıcının varsayılan stillerini sıfırlar ve bazı temel kurallar belirler.@tailwind components Herhangi bir şey enjekte edilebilir; bunu sizin aracılığınızla yapabilirler. @apply Komut veya yapılandırma dosyası tarafından kaydedilen özel bileşen sınıfları.@tailwind utilities Tüm Tailwind’in pratik sınıfları eklenecektir.

Son olarak, bu CSS dosyasını oluşturmanız gerekiyor. Eğer webpack veya Vite gibi paketleme araçları kullanıyorsanız ve PostCSS eklentisini doğru şekilde yapılandırdıysanız, bu işlemler otomatik olarak gerçekleşecektir. Ayrıca, Tailwind CLI’yi kullanarak dosyaları dinleyip oluşturabilirsiniz.npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchİnşa işlemi tamamlandıktan sonra, çıktı dosyasını HTML içine dahil edin. output.css O kadar.

Tavsiye edilen okuma Tailwind CSS Çerçevesini Derinlemesine Analiz Etme: Başlangıçtan Uygulamaya。

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

Tailwind CSS’in özü, geniş ve sistemli pratik sınıf kütüphanesindedir. Bu sınıfların adlandırma kurallarını öğrenmek, onları verimli bir şekilde kullanmanın anahtarıdır.

Yaygın Kullanılan Araçlar Kategorisi Genel Bakışı

Tailwind’taki sınıf adları genellikle “özellik-değer” formatındadır ve değerler, tasarım sisteminin ölçeğine göre (örneğin 0, 1, 2, 4, 6, 8…) tanımlanır. Örneğin:
Boşluk (Spacing):m-4(margin: 1rem)p-2(padding: 0.5rem)mt-8(margin-top: 2rem).
Metin (Tipografi):text-lg`(font-size: 1.125rem)`font-bold`(font-weight: 700)`text-gray-800(renk: #2d3748).
Arka plan ve çerçeve:bg-blue-500(`background-color`)border，rounded-lg(border-radius: 0.5rem);
Düzen (Layout):flex，items-center(align-items: center)justify-betweenjustify-content: space-between;

Responsive tasarımı gerçekleştirmek

Tailwind, “mobil öncelikli” (mobile-first) bir tasarım yaklaşımı benimsemektedir. Varsayılan sınıflar mobil cihazlar (küçük ekranlar) için tasarlanmıştır. Daha büyük ekranlar için stil eklemek istiyorsanız, “responsive” (uyumlu) ön eklerini kullanmanız gerekir. md:、lg:、xl:、2xl:。

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.

Bu duraklamalar (breakpoints) şu şekilde kullanılabilir: tailwind.config.js Dosyaların theme.screens Bazı kısımları özelleştirebilirsiniz. Tipik bir duyarlı (responsive) buton stilinin örneği aşağıdaki gibidir:

<button class="text-sm bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 md:text-base lg:py-3 lg:px-6">
  响应式按钮
</button>

Bu örnekte, buton mobil cihazlarda küçük font boyutuyla kullanılmaktadır.text-smOrta boy ekranlarda (…)md:10 punto ve üzeri yazı boyutlarında temel yazı tipi kullanılmalıdır.md:text-baseBüyük ekranda…lg:Daha büyük bir iç boşluğa sahiptir.lg:py-3 lg:px-6Duraklatma (hover) efekti, bir nesneye fare ile yaklaşıldığında (veya başka bir eylem gerçekleştirildiğinde) aktif hale gelir. hover: Varyasyon uygulamaları. HTML içinde yanıt veren (reaktif) mantığı deklaratif bir şekilde yazmanın bu yolu oldukça sezgiseldir.

Özelleştirilmiş Yapılandırmalar ve Gelişmiş Kullanımlar

Tailwind’in en güçlü yanı, son derece yüksek özelleştirilebilir olmasıdır. Yapılandırma dosyaları aracılığıyla, varsayılan temalarını genişletebilir veya tamamen değiştirebilirsiniz.

Tavsiye edilen okuma Tailwind CSS’in Güçlü Özelliklerini Açın: Pratik Uygulamalara Öncelik Veren CSS Çerçevesinin Kapsamlı Rehberi。

Genişletilmiş Tema Ayarları

tailwind.config.js Bu, özelleştirilmiş (kullanıcı tarafından belirlenmiş) temeldir. Bunu kullanabilirsiniz. theme.extend Nesneye yeni değerler eklenir ve bu değerler varsayılan temayla birleştirilir; temayı geçersiz kılmaz. Örneğin, yeni bir marka rengi ve özelleştirilmiş bir aralık ekleyebilirsiniz:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Yapılandırma tamamlandıktan sonra, projenizde bunu kullanabilirsiniz. bg-brand 和 w-128 İşte böyle bir sınıf. Yapılandırmada bulunan… content Bu alan çok önemlidir; Tailwind’in hangi dosyaları tarayarak “ağaç sallama optimizasyonu” (tree-shaking) işlemi yapması gerektiğini belirtir. Bu işlem, üretim sürümü oluşturulurken kullanılmayan tüm stil sınıflarının kaldırılmasını sağlar. Böylece CSS dosyalarının boyutu en aza indirilmiş olur.

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.

Yeniden kullanılabilir bileşen sınıfları oluşturun.

Pratik sınıfların doğrudan HTML içinde kullanılmasını teşvik etsek de, projelerde sık sık tekrarlanan karmaşık stil kombinasyonları için bu sınıflar bileşen sınıfları olarak ayrılabilir. Bunu gerçekleştirmenin birkaç yolu vardır:

1. Kullanım @apply Talimat: CSS dosyalarında, etiketini kullanabilirsin. @apply Birden fazla pratik sınıfı yeni bir sınıf içinde birleştirin.

    .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;
    }