Tailwind CSS, özelliklere (fonksiyonelliklere) öncelik veren bir CSS çerçevesidir.

Tailwind CSS, işlevselliği öncelikli bir CSS çerçevesidir ve geliştiricilere özelleştirilmiş kullanıcı arayüzleri hızlı bir şekilde oluşturmaları için bir dizi atomize edilmiş, önceden tanımlanmış kullanışlı sınıf (Utility Class) sunar. Geleneksel bileşen tabanlı CSS çerçevelerinden farklı olarak, stilleri doğrudan HTML aracılığıyla kontrol etmeyi teşvik eder ve bu sayede stil ile yapı arasında sıkı bir bağlantı kurulur. Bu benzersiz yaklaşım, ön uç stil geliştirme sürecini yeniden şekillendirmiştir.

Temel Prensipler ve Çalışma Mekanizması

Tailwind CSS’in temel felsefesi “atomize CSS” (parçalara ayrılmış CSS)’dir. Bu, butonlar, kartlar gibi önceden hazırlanmış bileşenler sunan bir çerçeve değil; binlerce küçük ve tek işlevli sınıf içeren, temel bir araç setidir.

Pratik sınıflar (utility classes) nasıl çalışır?

框架中的每个实用类（Utility Class）通常对应一条或多条 CSS 规则。例如，类名 .text-center Karşılık gelen text-align: center;Ve .bg-blue-500 Bu durumda belirli bir mavi arka plan rengi tanımlanmıştır. Geliştiriciler, HTML öğelerine bu sınıfları uygulayarak istenen stilizi oluştururlar ve özel CSS kodları yazmalarına gerek kalmaz.

Tavsiye edilen okuma Tailwind CSS’de Uzmanlaşmak: Başlangıçtan Gerçek Uygulamalara Kadar Pratik Bir Rehber。

Stil oluşturma süreci

Proje başlatıldığında, Tailwind projedeki tüm şablon dosyalarını tarar (örneğin…) *.html, *.jsx, *.vue), kullanılan tüm pratik sınıfları tanır. Daha sonra, bu sınıflar konfigürasyon dosyasına dayanarak işlemler gerçekleştirilir. tailwind.config.jsKullanılan tüm sınıfları ve bunların varyantlarını (örneğin, üzerine gelindiğinde veya odaklandığında gerçekleşen değişiklikler) dinamik olarak, mümkün olduğunca küçük bir CSS dosyası halinde oluşturun. Bu tür bir talep bazlı üretim yöntemi, nihai CSS dosyasının boyutunun en aza indirilmesini 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 →

Kurulum ve Temel Ayarlar

Tailwind CSS’i bir projeye entegre etmek oldukça basittir; çünkü birçok farklı derleme aracını ve çerçeveyi destekler.

npm aracılığıyla yükleme

En yaygın yöntem, npm veya yarn kullanarak kurmaktır. Öncelikle, proje kök dizininde bir npm projesi oluşturun, ardından Tailwind ve bağımlılıklarını yükleyin.

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.js。

Yapılandırma içeriğinin taranacağı yol

Oluşturulan tailwind.config.js Dosyada, asıl önemli olan… content Bu alan, Tailwind’e hangi dosyaların taranması gerektiğini, böylece sınıf adlarının bulunabileceğini belirtir.

Tavsiye edilen okuma Tailwind CSS: Başlangıç ve Uygulama Kılavuzu: Sıfırdan Modern, Yanıt Veren Arayüzler Oluşturma。

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

Temel stilleri içe aktarın.

Sonra, ana CSS dosyanızda (örneğin src/styles.cssİçerikte, kullanılmaktadır. @tailwind Tailwind CSS’nin temel stillerini enjekte etmek için gerekli komutlar.

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

Daha sonra, derleme sürecinizin (webpack, Vite vb. kullanarak) bu CSS dosyasını işlemek için PostCSS ile yapılandırıldığından emin olun; böylece Tailwind’in ön işleme adımları etkili olacaktır.

Gerçek Uygulamalar ve Yaygın Kullanılan Sınıflar

Tailwind CSS’yi etkili bir şekilde kullanmanın anahtarı, adlandırma kurallarına ve sınıf adlarının birleştirilme yöntemlerine aşina olmaktır.

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.

Düzenleme ve Aralıklar

Tailwind, sistematik bir aralık ölçeği seti sunar (bu ölçekler… temel alınarak oluşturulmuştur). remÖrneğin, stil sınıfları ve düzenleme sınıfları bulunmaktadır..p-4 adına padding: 1rem;，.mt-2 adına margin-top: 0.5rem;Elastik kutu (flexbox) düzeni için şunlar kullanılabilir: .flex, .items-center, .justify-between vs.

<div class="flex justify-between items-center p-4">
  <div>Sol taraftaki içerik.</div>
  <div>Sağ taraftaki içerik.</div>
</div>

Renkler ve Dizgi

Metin renginin kullanımı .text-{颜色}-{色度}Örneğin, .text-gray-800Arka plan renginin kullanımı .bg-{颜色}-{色度}Yazı tipi boyutları ise şu şekildedir: .text-sm, .text-lg, .text-xl Bir dizi önceden tanımlanmış sınıf…

Durum ve responsive (uyumlu ekran görünümleri sunan) varyantlar

Tailwind, etiket adlarının önüne durum (state) ön ekleri eklenmesine izin vererek etkileşimli stilleri tanımlamayı sağlar. Örneğin,.hover:bg-blue-600 Mouse üzerine geldiğinde koyu mavi bir arka plan uygulanır. Benzer şekilde, duyarlı (reaktif) tasarım… .md:text-center Bu sınıfın uygulamaları, orta boyutlu ve daha büyük ekranlarda metnin merkezde kalmasını sağlar. Bu varyantlar isteğe bağlı olarak bir arada kullanılabilir.

Tavsiye edilen okuma Tailwind CSS’in Potansiyelini Açın: Temelden İleri Seviyeye Kadar Pratik Bir Rehber。

Gelişmiş Özellikler ve Özelleştirmeler

Tailwind, hazır olarak kullanıma sunulan sınıfların yanı sıra, güçlü genişletme ve özelleştirme olanakları da sunar.

Derinlemesine özelleştirilebilir tema

在 tailwind.config.js 的 theme.extend Nesnelerde, renk, yazı tipi, aralıklar, kırılma noktaları gibi varsayılan tasarım token’larını geçersiz kılabilir veya genişletebilirsiniz.

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.

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

Daha sonra, özel olarak oluşturduğunuz sınıfları kullanabilirsiniz. .text-brand-primary 和 .p-128。

Yeniden kullanılabilir bileşenleri ayıklayın.

Pratik sınıfların kullanımı teşvik edilse de, projelerde sık sık kullanılan stil parçaları için farklı yöntemler tercih edilebilir. @apply Bu komut, CSS içindeki bileşen sınıflarını çıkarır.

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

Üçüncü parti eklentiler kullanmak

Zengin eklenti ekosistemi, Tailwind’in işlevselliğini genişletebilir. Örneğin,@tailwindcss/forms Daha iyi form stilleri sağlayın.@tailwindcss/typography Güzel bir makale metni düzenleme stilini sağlamak için yalnızca uygulamayı yüklemeniz ve yapılandırma dosyasını ayarlamanız yeterlidir. plugins Diziden içe aktarabilirsiniz.

Özetle.

Tailwind CSS, benzersiz ve pratik odaklı yaklaşımıyla ön uç stil geliştirmenin verimliliğini ve esnekliğini önemli ölçüde artırmıştır. Atomik sınıf adları sayesinde yüksek derecede özelleştirme imkanı sunar; ihtiyaç duyulduğunda içeriklerin üretilmesiyle performansı garanti eder ve güçlü yapılandırma ve eklenti sistemleri sayesinde derinlemesine özelleştirme ihtiyaçlarını karşılar. Hızlı prototiplerden büyük üretim projelerine kadar her alanda mükemmel bir uyum gösterir ve modern web geliştirmede estetik, tutarlı ve yüksek performanslı arayüzler oluşturmak için güçlü bir araçtır. Temel kavramlarını ve iş akışlarını öğrenmek, geliştiricilerin stil yaratıcılığını etkin bir şekilde serbest bırakır.

Sıkça Sorulan Sorular.

Tailwind CSS, HTML dosyalarının boyutunu ve karmaşıklığını artırır mı?

Evet, HTML’de sınıf adlarının sayısı önemli ölçüde artmaktadır ve bu, bu teknolojinin ana tartışma konularından biri olarak görülmektedir. Bir eleman on beş veya daha fazla sınıf içerebilir.

Ancak bu “aşırı karmaşıklık”, stilin yerelleştirilmesi, son derece yüksek özelleştirilebilirlik ve sıfır gereksiz CSS kodu ile sonuçlanmaktadır. Birçok geliştirici, bunun birden fazla CSS dosyası arasında gezinmek ve seçicilerin özgüllüğünü yönetmekten daha verimli olduğunu düşünmektedir. Ayrıca, modern sıkıştırma araçları sınıf adlarını etkili bir şekilde sıkıştırabilir ve bu da gerçek aktarım boyutları üzerinde çok az etkiye sahiptir.

Ekip projelerinde stil tutarlılığını nasıl sağlayabiliriz?

Tailwind, sınırlı bir tasarım sistemi (renkler, aralıklar, yazı tipi boyutları vb.) aracılığıyla görsel tutarlılığı zorunlu kılar. Tüm geliştiriciler aynı tasarım sistemini kullanırlar. rem Temel alınan aralık ölçekleri ve renk paletleri.

Birlikliliği daha da artırmak için, ekibin konuları tam olarak tanımlaması ve bunlardan tam olarak yararlanması gerekmektedir. tailwind.config.js Özelleştirilmiş temaları kullanmayı teşvik ediyoruz. @apply Sık kullanılan bileşen stillerini ayıklayın. Ayrıca, Prettier eklentisini de kullanabilirsiniz. prettier-plugin-tailwindcss Sınıf adlarını otomatik olarak sıralayarak kod stilini birleştirir.

Tailwind CSS tarafından oluşturulan nihai CSS dosyasının boyutu ne kadar?

PurgeCSS teknolojisinin (şimdi içerik taramasına entegre edilmiş durumda) “ihtiyaca göre oluşturma” prensibini kullanması nedeniyle, nihai CSS dosyasının boyutu genellikle çok küçüktür. Bu dosya yalnızca projede gerçekten kullanılan sınıfları içerir.

Tipik bir projede, çok sayıda özellik kullanılsa bile, nihai CSS dosyasının boyutu genellikle 10 KB’nin altındadır. Sıkıştırma ve Brotli/Gzip kodlaması işlemlerinden sonra iletim boyutu daha da azalır; bu da, kullanılmayan stilleri içeren büyük bileşen kütüphanelerini manuel olarak yazmaktan veya kullanmaktan çok daha verimlidir.

Dinamik olarak oluşturulan sınıf adlarını nasıl işlemeliyim?

Eğer sınıf adları bir dize birleştirilerek dinamik olarak oluşturuluyorsa (örneğin)... text-${error ? 'red' : 'green'}-500Tailwind’in statik analiz araçları bu özel stil dosyalarını tanıyamayabilir; bu durumda bu stiller oluşturulan CSS dosyasına dahil edilmez.

Çözüm şudur: 1) Mümkün olduğunca tam sınıf adı dizelerini kullanın ve hangi sınıfların ekleneceğini kontrol etmek için mantıksal kararlar alın. 2) tailwind.config.js 的 safelist Seçenekler arasında, dinamik olarak oluşturulabilecek bu tam sınıf adı dizileri açıkça listelenmelidir ve bunların nihai stil dosyasına dahil edildiğinden emin olunmalıdır.