Tailwind CSS başlangıç rehberi: Modern, duyarlı web sayfalarını sıfırdan bire kadar oluşturma.

什么是 Tailwind CSS

Günümüzün ön uç geliştirme alanında,Tailwind CSS Artık göz ardı edilemeyecek bir varlık haline geldi. Geleneksel bir CSS çerçevesi değil; işlevselliğe öncelik veren, pratik bir CSS çerçevesidir. Bootstrap 或 Foundation Farklı çerçeveler, önceden hazırlanmış bileşenlerin (örneğin düğmeler, navigasyon çubukları) sağlanmasında farklılık gösterir.Tailwind CSS Sunulanlar, ince ayarlanmış ve atomize edilmiş CSS sınıflarıdır; bu sınıflar sayesinde geliştiriciler, HTML içinde bu sınıfları doğrudan birleştirerek her türlü özelleştirilmiş tasarımı oluşturabilirler.

Temel felsefesi “pratik önceliklidir”. Yani, bunun için herhangi bir şeye ihtiyacınız yok. .css Dosyada çok sayıda özel stil yazabilirsiniz ve sınıf adlarının semantik olarak nasıl adlandırılacağı konusunda endişelenmenize gerek kalmaz. Aksine, şöyle gibi araçları kullanabilirsiniz: text-blue-500、p-4、rounded-lg Bu tür tanımlayıcı sınıf adları, stillerin hızlı bir şekilde uygulanmasını sağlar. Bu yöntem, UI oluşturma sürecini büyük ölçüde hızlandırır ve stil şemasının küçük ve sade kalmasını sağlar; çünkü yapılandırma araçları (örneğin…) aracılığıyla çalışır. PurgeCSSKullanılmayan stiller kolayca kaldırılabilir ve sonuç olarak çok küçük boyutlarda bir üretim dosyası elde edilir.

Tailwind CSS kullanmaya nasıl başlanır?

Kullanmaya başlayın. Tailwind CSS Birçok farklı yolu bulunmaktadır; en önerilen yöntem, en iyi geliştirme deneyimini ve en yüksek üretim optimizasyonunu sağlayan resmi PostCSS eklentisi aracılığıyla kurmaktır.

Tavsiye edilen okuma Sıfırdan Uzmanlığa Kadar Tailwind CSS Pratik Eğitimi: Modern, Yanıt Veren Web Sayfaları Oluşturma。

Çekirdek paketleri npm aracılığıyla yükleyin.

Öncelikle, bir projeyi başlatmanız gerekiyor (eğer henüz başlatılmamışsa), ardından gerekli bağımlılıkları npm veya yarn kullanarak yüklemeniz gerekiyor. Temel yükleme komutu şudur: npm install -D tailwindcss postcss autoprefixerBurada,postcss 和 autoprefixer CSS işlemleri için gerekli bir araçtır.

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 →

Yükleme tamamlandıktan sonra, oluşturmanız gereken bir şey var. Tailwind CSS Konfigürasyon dosyası. Komutu çalıştırın. npx tailwindcss init Proje kök dizininde “” adında bir dosya oluşturulacaktır. tailwind.config.js Bu dosya, özelleştirilmiş tasarım sisteminizin (renkler, aralıklar, kesme noktaları vb.) temelini oluşturur.

PostCSS’i yapılandırın ve temel stilleri içe aktarın.

Bundan sonra, PostCSS’nin yapılandırma dosyasında (genellikle…) değişiklikler yapmanız gerekecek. postcss.config.jsEkleme: Belirtilen metnin içine eklemeler yapılmalıdır. tailwindcss 和 autoprefixer Bir eklenti olarak… Son olarak, ana CSS dosyanızda (örneğin…) src/styles.css 或 input.cssBu metinde, belirtilen adımlar aracılığıyla… @tailwind Komut Tanıtımı (Command Introduction) Tailwind CSS Her bir katmanı.

Tipik bir ana CSS (Stil Şablonu) dosyasının içeriği şu şekildedir:

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

Bu üç satırlık komut sırasıyla temel stilleri (tarayıcının varsayılan stillerini sıfırlamak için), bileşen sınıflarını (tekrarlanan ve kullanışlı sınıf kombinasyonlarını çıkarmak için) ve tüm kullanışlı sınıfları içerir.

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Temellerden Uygulamalara Kadar, Modern CSS Çerçevesiyle Verimli Geliştirme。

Temel Kavramlar ve Pratik Sınıf Grameri

Kavramak Tailwind CSS Buradaki anahtar nokta, pratik sınıfların adlandırma kurallarını ve duyarlı (reaktif) tasarım yöntemlerini anlamaktır.

Pratik Kullanım Amaçlı Nesnelerin Adlandırma Kuralları

Tailwind CSS Sınıf adları, anlaşılır bir kural setine uyar. Çoğu sınıf adı, özniteliklerin kısaltmalarından ve değerlerinden oluşur ve bunlar birleştirme işareti (-) ile birbirine bağlanır. Örneğin:
* m-4 Göster. margin: 1rem; (4, aralık ölçeğindeki birimlerden biridir.)
* p-2 Göster. padding: 0.5rem;。
* text-center Göster. text-align: center;。
* bg-blue-600 Arka plan renginin, mavi ton paletinde 600 numaralı renk olduğunu belirtir.
* hover:bg-blue-700 Mouse üzerine geldiğinde uygulanacağını belirtir. bg-blue-700 Stil.

Bu adlandırma yöntemi, geliştiricilerin dokümantasyona bakmasalar bile sınıf adlarının işlevlerini kabaca tahmin etmelerini sağlar. Çerçeve, düzenleme (Flexbox, Grid), aralıklar, tipografi, arka plan, kenarlıklar, efektler, animasyonlar gibi tüm CSS özelliklerini kapsayan son derece zengin sınıflar sunar.

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.

Tepkisel tasarım ve kırılma noktası ön ekleri

Modern, duyarlı web sayfaları oluşturmak, Tailwind CSS Güçlü yönlerinden biri, mobil öncelikli bir strateji benimsemesidir. Bu, önek içermeyen sınıfların tüm ekran boyutları için kullanıldığı, önek içeren sınıfların ise daha büyük ekran boyutları için kullanıldığı anlamına gelir.

İçerdiği kesme noktası (breakpoint) önekleri şunlardır:
* sm: (640 piksel)
* md: (768 piksel)
* lg: (1024 piksel)
* xl: (1280 piksel)
* 2xl: (1536 piksel)

Örneğin,<div class="text-sm md:text-base lg:text-lg"> Bu, mobil cihazlarda yazı tipi boyutunun küçük olarak ayarlandığını, orta boyutlu ekranlarda standart boyuta dönüştüğünü ve büyük ekranlarda ise büyük boyuta geçtiğini ifade eder. tailwind.config.js Dosyaların theme.screens Bu duraklama (breakpoint) değerlerinin bir kısmını kolayca özelleştirebilirsiniz.

Tavsiye edilen okuma Tailwind CSS’ye Derinlemesine Bir Bakış: Modern Ön Uç Geliştirme İçin Pratik Bir Stil Çerçevesi Rehberi。

Bir yanıt veren (responsive) kart bileşeni oluşturun.

Yukarıdaki kavramları bir örnekle somutlaştıralım ve basit bir, duyarlı (responsive) kart (kart tasarımı) oluşturalım.

HTML yapısını ve temel stillerini oluşturmak

Bir kart oluşturacağız; bu kartta resimler, başlıklar, açıklamalar ve butonlar bulunacak. Öncelikle, bir konteyner sınıfı kullanacağız. max-w-sm Kartların maksimum genişliğini sınırlayın ve kartların temel görünümünü tanımlamak için köşeleri yuvarlayın, gölge efekti uygulayın ve içerikin kenarlardan taşmasını gizleyin.

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.

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8">
  <img class="w-full h-48 object-cover" src="/img/card-image.jpg" alt="Kart görseli">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Tailwind CSS uygulama kartı.</div>
    <p class="text-gray-700 text-base">
      Bu, Tailwind CSS pratik sınıfları kullanılarak hızlı bir şekilde oluşturulmuş, duyarlı (responsive) bir kart bileşenidir. Hiçbir özel CSS kodu yazmanıza gerek kalmadan estetik bir kullanıcı arayüzü (UI) elde edebilirsiniz.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
      Daha fazla bilgi edinin.
    </button>
  </div>
</div>

Responsive (uyumlu) etkileşim efektleri ekleyin.

Şimdi, kartlara duyarlı (reaktif) özellikler ekliyoruz. Büyük ekranlarda kartların düzeninin değişmesini ve butonların daha zengin etkileşim geri bildirimleri sunmasını istiyoruz.

Kartın dış kabuğunu ve butonlarını değiştirdik:

<div class="max-w-sm md:max-w-md lg:max-w-lg rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8 hover:shadow-2xl transition-shadow duration-300">
  <!-- 图片和内容部分保持不变 -->
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:-translate-y-1 hover:scale-105">
      Daha fazla bilgi edinin.
    </button>
  </div>
</div>

• Dış konteyner için şunları ekledik: md:max-w-md 和 lg:max-w-lgKartların farklı kesme noktalarında kademeli olarak genişlemesini sağlar.
• Eklendi. hover:shadow-2xl 和 transition-shadow Kaydırma (hover) efekti ile gölge animasyonunu gerçekleştirin.
• Butona bir şey eklediniz. transform、hover:-translate-y-1 和 hover:scale-105Üzerine gelindiğinde hafifçe yukarı kayma ve büyütme efekti sağlanmalıdır.

Üretim Ortamı Optimizasyonu ve Özelleştirme

Doğrudan kullanın. Tailwind CSS Tam stil dosyasının boyutu çok büyüktür; bu nedenle üretim ortamı için optimizasyon yapmak son derece önemlidir.

PurgeCSS kullanarak kullanılmayan stilleri kaldırın.

Tailwind CSS 与 PurgeCSS Derin entegrasyon. Sadece… tailwind.config.js Dosyada doğru yapılandırma yapılmıştır. content Seçenekler, projedeki tüm şablonları, bileşenleri ve HTML dosya yollarını belirtir. Üretim sürümü oluşturulurken, derleme aracı bu dosyaları analiz eder ve nihai CSS’den kullanılmayan tüm öğeleri otomatik olarak kaldırır. Tailwind CSS Sınıf.

Aşağıda temel bir yapılandırma örneği verilmiştir:

// tailwind.config.js
module.exports = {
  content: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

Genişletme ve özelleştirilmiş tasarım jetonları (Expansion and Customized Design Tokens)

You can… tailwind.config.js 的 theme.extend Bazı temalar, varsayılan ayarları kolayca genişletebilirsiniz. Örneğin, özel bir renk ekleyebilir veya yeni bir aralık değeri belirleyebilirsiniz:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1a365d’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
  },
}

Daha sonra, projede bunu kullanabilirsiniz. bg-brand-blue 或 h-128 İşte böyle bir sınıf. Bu özelleştirme yöntemi, tasarım sisteminizin diğer bileşenlerle uyumlu çalışmasını sağlar. Tailwind CSS İş akışları birbirleriyle sorunsuz bir şekilde entegre edilmiştir.

Özetle.

Tailwind CSS “Pratiklik Öncelikli” (Practical Priority) felsefesiyle, geliştiricilerin CSS yazma şeklini tamamen değiştirdi. Tam ve atomize edilmiş bir araç seti sunarak, hızlı prototip oluşturmayı ve tutarlı, duyarlı kullanıcı arayüzleri geliştirmeyi son derece verimli hale getirdi. Başlangıçta bazı sınıf adlarını ezberlemeniz gerekebilse de, sezgisel adlandırma kuralları ve kapsamlı dokümantasyon sayesinde hızla alışabilirsiniz. Güçlü üretim optimizasyon özellikleri (stil temizleme) ve yüksek özelleştirilebilirlik ile birleştiğinde, bu araç seti gerçekten etkileyici bir çözüm sunar.Tailwind CSS Artık bireysel projelerden büyük kurumsal uygulamalara kadar ideal bir seçenek haline gelmiştir; geliştirme deneyimini önemli ölçüde iyileştirebilir ve yüksek kaliteli stil kodlarının korunmasını sağlar.

Sıkça Sorulan Sorular.

Tailwind CSS, HTML’nin karışık görünmesine neden olur mu?

Bu gerçekten yaygın bir endişe. HTML’de çok sayıda sınıf adının bir araya getirilmesi başlangıçta karmaşık görünebilir. Ancak birçok geliştirici bunun bir denge olduğunu düşünüyor: Stil kararlarını CSS dosyalarından etiketlere taşımak, aslında okunabilirliği ve sürdürülebilirliği artırır; çünkü bir elementin tüm stil bilgilerini farklı dosyalar arasında gezinmeden anlayabilirsiniz. Ayrıca, tekrarlanan bileşenler için belirli teknikler kullanabilirsiniz. @apply CSS’te komutlar kullanılarak ortak sınıf kombinasyonları çıkarılabilir; ayrıca, şablonların düzenli kalmasını sağlamak için React, Vue gibi bileşen çerçeveleriyle de entegrasyon yapılabilir.

Tailwind CSS’te bulunmayan stilleri nasıl örtebilir veya ekleyebilirsiniz?

Tamamen özelleştirilmiş stiller için birkaç seçeneğiniz var. Öncelikle, tailwind.config.js Bu, genişletilmiş konular için tercih edilen yöntemdir. İkincisi, CSS dosyanızda bunu yapabilirsiniz. @tailwind utilities; Komutun ardından istediğiniz özel CSS kodlarını yazabilirsiniz. Son olarak, tek bir stil için köşeli parantezler kullanarak herhangi bir değeri doğrudan içerikte (inline) belirtebilirsiniz; örneğin: top-[117px] 或 bg-[#1a365d]Bu, büyük bir esneklik sağlar.

Tailwind CSS’in performansı nasıldır?

Geliştirme modunda, tüm sınıfların dahil olması nedeniyle CSS dosyası oldukça büyük olabilir. Ancak üretim ortamında, doğru şekilde yapılandırıldığında… content Yol belirlendikten ve derleme optimizasyonları etkinleştirildikten sonra…Tailwind CSS Kullanılmayan tüm stiller kaldırılır ve sonuçta oluşturulan CSS dosyası genellikle diğer çerçevelere göre çok daha küçüktür; hatta birçok elle yazılmış CSS dosyasından bile daha küçüktür. Bu nedenle performansı oldukça iyidir.

Hangi çerçeveler veya teknolojilerle birlikte kullanılmaya uygundur?

Tailwind CSS Bu, çerçeveyle ilgili bir durum değildir; HTML ve CSS kullanan herhangi bir teknoloji yığınıyla mükemmel bir şekilde uyum sağlayabilir. Özellikle React, Vue.js, Angular, Next.js, Nuxt.js, Svelte gibi modern ön uç çerçeveleri veya meta çerçeveleriyle birlikte kullanılmakta popülerdir. Pratik sınıflara dayalı yaklaşımı, bu çerçevelerin bileşen tabanlı tasarım felsefesiyle harika bir uyum içindedir.