Başlangıçtan ileri seviyeye: Modern, tepkisel web siteleri oluşturmak için Tailwind CSS'yi kullanma

什么是 Tailwind CSS

Tailwind CSS, işlevselliği öncelikli bir CSS çerçevesidir ve geliştiricilerin özelleştirilmiş kullanıcı arayüzleri hızlı bir şekilde oluşturmasına yardımcı olmak için birçok birleştirilebilir kullanışlı sınıf (Utility Class) sunar. Butonlar, navigasyon çubukları gibi önceden hazırlanmış bileşenler sunan Bootstrap gibi çerçevelerden farklı olarak, Tailwind herhangi bir önceden tasarlanmış bileşen sunmaz; bunun yerine, çok ayrıntılı ve esnek CSS sınıfları sağlar. text-center、p-4、bg-blue-500 Bunlar gibi özellikler, bu sınıfları doğrudan HTML içinde birleştirerek stil tasarlamanıza olanak tanır.

Temel felsefesi “pratikliğin önceliği”dir. Bu, CSS ve HTML dosyaları arasında sürekli gidip gelmenize veya bileşenlere isim vermek için kafa yormanıza gerek kalmadığı anlamına gelir. .user-card 或 .sidebar-wrapperTüm stiller, sınıf adları aracılığıyla doğrudan etiketlere uygulanır; bu da geliştirme hızını büyük ölçüde artırır ve stillerin tutarlılığını korur. Sınıf adları işlevlerini doğrudan tanımladığı için kodun okunabilirliği de artmış olur.

Bir diğer önemli özelliği, son derece yüksek özelleştirilebilir olmasıdır. Projenin kök dizinindeki dosyaları değiştirerek… tailwind.config.js Yapılandırma dosyaları sayesinde, tasarım sistemindeki renkleri, aralıkları, yazı tiplerini, kırılma noktalarını (breakpoints) ve diğer tüm tasarım öğelerini (design tokens) kolayca özelleştirebilirsiniz; böylece bunlar marka rehberinizle veya tasarım ihtiyaçlarınızla mükemmel bir şekilde uyum sağlar.

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

Temel Kavramlar ve Temel Kullanımlar

Tailwind CSS kullanmaya başlamak için, öncelikle bunu projenize entegre etmeniz gerekiyor. En yaygın yöntem, npm veya yarn aracılığıyla kurmaktı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 →

npm install -D tailwindcss
npx tailwindcss init

Başlatma komutu, bir şey oluşturacaktır. tailwind.config.js Dosya. Daha sonra, projenizin ana CSS dosyasına Tailwind’in komutlarını eklemeniz gerekiyor.

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

Pratik Sınıfların Adlandırma Kuralları

Tailwind’in sınıf adları, anlaşılır bir dizi kurala uyar. Örneğin, kenar boşlukları (Margin) için belirlenen sınıf adları… m-{size}Burada “size”, bir sayı (önceden belirlenmiş bir aralık oranına karşılık gelir) veya bir yön kısaltması olabilir.p-4 İç boşluğun (padding) 1rem olduğunu belirtir.mt-2 Üst kenar boşluğunu (margin-top) 0.5rem olarak belirtir. Renk sınıfları gibi… bg-red-600 Arka plan renginin kırmızı tonlarında 600. seviye olduğunu belirtir.text-gray-800 Metnin renginin gri tonlarında, 800. seviye olduğunu belirtir.

Responsive Design İlkeleri

Responsive tasarım, Tailwind’in en güçlü yönlerinden biridir. Mobil öncelikli (Mobile First) bir yaklaşım benimser. Tüm pratik sınıflar (utility classes), varsayılan olarak tüm ekran boyutlarında etkilidir; önekli sınıflar ise (prefix-lı classes)… md:text-center、lg:p-8Bu özellik, belirtilen durak noktasından itibaren ve sonrasındaki ekranlarda etkili olmak için kullanılır. Örneğin,<div class="text-sm md:text-base lg:text-lg"> Bu, metnin telefonlarda daha küçük, orta boy ekranlarda normal boyutta ve büyük ekranlarda ise daha büyük boyutta görüntüleneceği anlamına gelir.

Durum varyantlarının işlenmesi (Handling of state variants)

Tailwind, önekler aracılığıyla hover (üzerine gelindiğinde değişen özellikler) gibi güçlü durum değişiklikleri (state variations) desteği sunar.hover:Odak noktası (focus point)focus:Aktifleme (Activation)active:…) vb. Etkileşim durumlarına kolayca stil ekleyebilirsiniz, örneğin… <button class="bg-blue-500 hover:bg-blue-700">Bu varyantları etkinleştirmek için muhtemelen bazı ayarlamaların yapılması gerekecektir. tailwind.config.js Ortada yapılandırma bulunmaktadır.

Tavsiye edilen okuma Tailwind CSS'i keşfedin: Girişten ileri düzeye kadar pratik bir teknik rehber.。

Karmaşık düzenlemeler ve bileşenler oluşturmak

Tailwind CSS, atomik (temel) sınıflar sunsa da, bunları birleştirerek her türlü karmaşık düzeni ve yeniden kullanılabilir bileşeni oluşturabilirsiniz.

Grid ve esnek düzeni gerçekleştirin.

Kullanın. flex 和 grid İlgili sınıflar sayesinde düzenlemeler hızlı bir şekilde oluşturulabilir. Örneğin, basit bir iki sütunlu düzen (yan menü + ana içerik) şu şekilde gerçekleştirilebilir:

<div class="flex">
  <aside class="w-64 bg-gray-100 p-4">Kenar çubuğu</aside>
  <main class="flex-1 p-4">Ana İçerik Bölgesi</main>
</div>

Daha karmaşık ızgara düzenleri için şunlar kullanılabilir: grid Sınıf:

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.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-white p-4">Kart 1</div>
  <div class="bg-white p-4">Kart 2</div>
  <!-- 更多卡片 -->
</div>

Yeniden kullanılabilir bileşenler oluşturma modeli

Büyük projelerde, uzun sıralı sınıf adlarını birden fazla yerde tekrar tekrar yazmak verimsizdir. Tailwind, CSS’de ortak stilleri çıkarmak ve bileşen sınıfları oluşturmak için @layer ve @apply direktiflerinin kullanılmasını önerir. Örneğin, tek bir düzenli buton stilini tanımlayabilirsiniz:

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-600 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 doğrudan HTML içinde kullanabilirsiniz. <button class="btn-primary">Bu yöntem, hem Tailwind’in esnekliğini korur hem de kod tekrarlarını önler. Daha modern ve önerilen bir diğer yöntem ise, stil içeren UI öğelerini kapsamlamak için JavaScript çerçevelerinin (örneğin React, Vue) bileşenleştirme özelliklerinden yararlanmaktır.

Koyu modu işleme

Tailwind, koyu mod desteğine sahiptir. tailwind.config.js Ayarlar bölümünde… darkMode: ‘class’ Daha sonra, bunu yapmak için... <html> 或 <body> Etiket ekleme class=”dark” Modu değiştirmek için buraya gelin. Daha sonra sınıf adının önüne şunu ekleyin: dark: Önekler, koyu moddaki stilleri tanımlamak için kullanılır:<div class="bg-white dark:bg-gray-800">。

Tavsiye edilen okuma Tailwind CSS ile modern, tepkisel web siteleri oluşturma: Başlangıçtan uygulamaya kadar bir rehber.。

Gelişmiş Özelleştirme ve Optimizasyon

Tailwind’i projeniz için tam anlamıyla etkili bir araç olarak kullanabilmek için, onun yapılandırılması ve optimizasyon yöntemlerini derinlemesine anlamak çok önemlidir.

Derin özelleştirilmiş tasarım sistemi.

tailwind.config.js Bu, tasarım kontrol panelinizdir. Burada varsayılan temayı genişletebilir veya değiştirebilirsiniz. Örneğin, markanın renklerini ekleyebilir veya aralıkları özelleştirebilirsiniz:

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.

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

Daha sonra, bunu kullanabilirsiniz. bg-brand 或 p-128 İşte böyle bir sınıf adı. Ayrıca buradan özel yazı tipi aileleri, gölgeler, animasyonlar vb. de yapılandırabilirsiniz.

PurgeCSS kullanarak ürün sürümünün boyutunu optimize edin.

Yaygın bir endişe, bu kadar çok pratik sınıfın kullanılmasının nihai CSS dosyasının çok büyük boyutlara ulaşmasına neden olmasıdır. Tailwind, PurgeCSS’i entegre ederek (Tailwind CSS v3.0 ve sonraki sürümlerde “İçerik Taraması” olarak adlandırılır) bu sorunu çözer. PurgeCSS, projenizin dosyalarını (HTML, JSX, Vue bileşenleri gibi) otomatik olarak tarar, gerçekten kullanılan sınıf adlarını belirler ve üretim sırasında kullanılmayan tüm stilleri kaldırır. tailwind.config.js Ortadaki yapılandırma. content Yol çok önemlidir:

module.exports = {
  content: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’],
  // … 其他配置
}

Üçüncü parti eklentilerin entegrasyonu

Tailwind’in ekosistemi oldukça zengindir ve işlevselliğini genişletmek için birçok resmi ve topluluk tarafından geliştirilmiş eklenti bulunmaktadır. Örneğin,@tailwindcss/forms Eklenti, form elemanları için daha iyi varsayılan stiller sağlar.@tailwindcss/typography Eklenti bir şey sunuyor. prose Bu sınıf, Markdown veya zengin metin editörleri tarafından oluşturulan stilizasyonsuz HTML içeriğini zarif bir şekilde renderleyebilir. npm aracılığıyla yüklendikten sonra, yapılandırma dosyasında gerekli ayarlamalar yapılmalıdır. plugins Diziden içe aktarabilirsiniz.

Özetle.

Tailwind CSS, pratik ve önceliklere dayalı bir metodoloji ile geliştiricilerin CSS yazma şeklini tamamen değiştirdi. İnce ayarlanabilir, birleştirilebilir sınıflar sunarak stil kararlarını doğrudan HTML içine yerleştirir ve bu sayede çok yüksek bir geliştirme verimliliği ile tasarım tutarlılığı sağlar. Basit metin renklerinden karmaşık, duyarlı ızgara düzenlerine, koyu mod desteğinden durum tabanlı etkileşim bileşenlerine kadar, Tailwind her şey için basit ve güçlü çözümler sunar. Derinlemesine özelleştirme imkanlarıyla… tailwind.config.js Akıllı üretim optimizasyonları sayesinde, küçük projelerden büyük kurumsal uygulamalara kadar çeşitli senaryolara mükemmel bir şekilde uyum sağlayabilir. Tailwind CSS’yi öğrenmek, sistematik ve sürdürülebilir bir modern stil geliştirme iş akışına sahip olduğunuz anlamına gelir.

Sıkça Sorulan Sorular.

Tailwind CSS ile içe aktarılan (inline) stil arasındaki fark nedir?

Görünüşe göre her ikisi de HTML içinde stil tanımlamak için kullanılıyor; ancak Tailwind ve içe aktarılan (inline) stiller arasında temel farklar vardır. Tailwind’in sınıf adları, aralık oranları, renk paletleri, kırılma noktaları gibi katı bir tasarım sistemine dayanır ve bu da stillerin tutarlılığını sağlar. İçe aktarılan stiller ise rastgele değerler içerir ve bu da tasarım tutarsızlıklarına yol açabilir. Ayrıca, Tailwind sınıfları medya sorgularını (reaktif tasarım) ve durum değişikliklerini (örneğin “hover” veya “focus” etkilerini) destekler; bunlar içe aktarılan stillerle doğrudan gerçekleştirilemez. Tailwind, sonunda gerçek CSS kodu üretir ve bu kod PurgeCSS aracılığıyla optimize edilebilir.

React/Vue gibi bileşen çerçevelerinde Tailwind kullanmanın en iyi uygulamaları nelerdir?

React, Vue veya Svelte gibi bileşen çerçevelerinde en iyi uygulama, Tailwind sınıflarını bileşen mantığıyla birleştirmektir. Öncelikle, çerçevenin bileşenleştirme özelliklerinden yararlanarak tekrarlanabilir UI öğelerini (örneğin Button, Card gibi) paketleyin; böylece şablonlarda uzun sınıf adlarını tekrar tekrar yazmaktan kaçınabilirsiniz. Ayrıca, CSS-in-JS kütüphanelerini (örneğin Twin Macro) kullanabilir veya başka yöntemlerle bu sınıfları JavaScript içinde tanımlayabilirsiniz. @apply Komutlar, stil şemasında bileşen sınıfları oluşturur; ancak bu, doğrudan kullanışlı sınıfları birleştirmek kadar esnek değildir. En önemlisi, PurgeCSS’in içerik tarama yolunu doğru bir şekilde yapılandırmaktır, böylece bileşen dosyalarınızı analiz edebilsin.

Tailwind projelerinde karşılaşılabilecek aşırı uzun sınıf adı (class name) string’lerini nasıl yönetebiliriz?

Aşırı uzun sınıf adı dizeleri için birkaç yönetim stratejisi vardır. Bunlardan biri… @apply Bu talimatlar, sık kullanılan bir dizi sınıfı yeni bir CSS sınıfına taşıyarak kalıcı ve tamamen aynı stil kombinasyonlarının sağlanmasını amaçlamaktadır. İkinci olarak, editör eklentileri (örneğin Tailwind CSS IntelliSense) kullanılarak sınıf adlarının otomatik olarak tamamlanması, manuel girişin ve hataların azaltılması sağlanır. En önerilen yöntem, uzun sınıf adlarına sahip öğeleri bileşen tabanlı bir çerçevede ayrı bileşenler haline getirmektir; böylece şablonlarda yalnızca net bileşen etiketlerinin kullanılması gerekmektedir. <PrimaryButton>Böylece şablonun sadeliği korunur.

Tailwind CSS’in tarayıcı uyumluluğu konusunda nasıl bir destek sunuyor?

Tailwind CSS v3.0, modern tarayıcılara yönelik olarak tasarlanmıştır ve daha küçük dosya boyutları ile daha güçlü özellikler sunmak için CSS değişkenleri ve modern özellikler kullanır. Bu nedenle, Internet Explorer 11 gibi eski sürüm tarayıcılarda düzgün çalışmayacaktır. Eğer projeniz eski sürüm tarayıcıları desteklemeyi gerektiriyorsa, daha geniş bir tarayıcı uyumluluğu sunan Tailwind CSS v2.x sürümünü kullanmanız gerekir. v2.x sürümü, gerekli geri dönüş (fallback) çözümlerini ek konfigürasyonlar ve araçlar (örneğin postcss) aracılığıyla ekleyebilir. 2026 yılı itibarıyla, genel tüketicilere yönelik çoğu projede modern tarayıcıları desteklemek genellikle yeterlidir.