Tailwind CSS başlangıç kılavuzu: Pratik öncelikli modern CSS çerçevesini öğrenin.

什么是 Tailwind CSS

Geleneksel CSS geliştirme süreçlerinde, genellikle her HTML elemanı için özel sınıf adları oluşturmamız ve bu sınıfların stillerini ayrı bir CSS dosyasında tanımlamamız gerekiyordu. Tailwind CSS ise “Faydacılık Öncelikli” (Utility-First) yaklaşımını benimsemektedir. Bu, işlevsel sınıflara öncelik veren bir CSS çerçevesidir ve çok sayıda, ayrıntılı ve tek işlevli CSS sınıfı sunar. Geliştiriciler, herhangi bir tasarımı oluşturmak için bu sınıfları doğrudan HTML veya JSX içinde birleştirirler.

Tailwind CSSTemel fikir, stilleri yeniden kullanılabilir ve atomize edilmiş sınıflar olarak gerçekleştirmektir. Örneğin, iç kenar boşluğu, mavi arka plan ve beyaz metin içeren bir buton oluşturmak istiyorsanız, bunun için özel bir sınıf oluşturmanıza gerek yoktur.btn-primaryBir sınıf oluşturup onun için CSS kuralları yazmak yerine, doğrudan elemanlara bu kuralları ekleyebilirsiniz.p-4、bg-blue-500和text-whiteBu sınıflar sayesinde, proje dosyaları arasında gidip gelme süresi büyük ölçüde azaltılmıştır. Ayrıca, stil kararları doğrudan işaretleme dilinde (markup language) sunulduğu için UI oluşturma süreci daha anlaşılır ve verimli hale gelmiştir.

Diğer framework’lerle (örneğin Bootstrap ile) karşılaştırıldığında…Tailwind CSSÖnceden oluşturulmuş, sabit bir görünüme sahip UI bileşenleri (örneğin açılır menüler, navigasyon çubukları) sunulmamaktadır. Bunun yerine, bu bileşenleri oluşturmak için gerekli “ham maddeler” sağlanmaktadır. Bu paradigma değişikliği, eşsiz bir esneklik getirmekte ve geliştiricilerin, framework’ün varsayılan temaları veya stilleriyle uğraşmadan tamamen özelleştirilmiş tasarımlar oluşturmalarına olanak tanımaktadır.

Tavsiye edilen okuma Tailwind CSS’nin Temel Prensipleri: Pratikliğe Öncelik Veren, Atomize Edilmiş CSS Çerçevesinin İşleyiş Mekanizması Açıklanıyor。

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

Paket yöneticisi aracılığıyla yükleme

En yaygın ve önerilen yöntem, npm veya yarn gibi paket yöneticileri kullanarak kurmaktır. Öncelikle, projenizin kök dizininde bir Node.js projesi oluşturun (eğer henüz yapmadıysanız), ardından gerekli paketleri yükleyin.tailwindcssVe bunların karşılıklı bağımlılıkları.

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

İlk komut, Tailwind CSS’yi projenize geliştirme için gerekli bir bağımlılık olarak yükler. İkinci komut ise varsayılan bir yapılandırma dosyası oluşturur.tailwind.config.jsBu, özelleştirilmiş çerçeve davranışlarınızı (temalar, eklentiler, varyantlar gibi) ayarlayabileceğiniz ana yerdir.

Şablon yolunu yapılandırın.

Oluşturulantailwind.config.jsDosya içinde bir şey bulunmaktadır.contentBu alan, Tailwind’in hangi dosyaları tarayarak kullanılan sınıf adlarını bulması gerektiğini belirtmek için kullanılır. Bu, üretim ortamında yapılan derlemeler (build processes) için çok önemlidir; çünkü Tailwind, “ağaç sallama” (tree shaking) optimizasyonu kullanarak yalnızca projenizde gerçekten kullanılan CSS dosyalarını oluşturur. Bu ayarı, projenizin yapısına göre yapılandırmanız gerekir. Örneğin:

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

Temel stilleri içe aktarın.

Devamında, ana CSS dosyanızda (örneğin…)src/styles.css或src/index.cssİçerikte, kullanılmaktadır.@tailwindKomut, Tailwind’in çeşitli seviyelerini içermelidir.

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

@tailwind baseTailwind CSS’nin temel stilleri; yani bazı temel sıfırlama ve varsayılan stillerdir.@tailwind componentsKomut enjeksiyonu için, kullanabileceğiniz bazı önceden tanımlanmış bileşen sınıflarını ekleyin.@tailwind utilitiesTüm işlevsel sınıflar, komutlar aracılığıyla dosyaya enjekte edilir; bu, çerçevenin temelidir. Son olarak, bu CSS dosyası PostCSS gibi bir derleme aracı kullanılarak işlenir ve tarayıcılar tarafından anlaşılabilir, saf bir CSS formatına dönüştürülür.

Tavsiye edilen okuma Tailwind CSS’in temel yapısını öğrenerek ön uç geliştirme verimliliğinizi ve tasarım tutarlılığınızı artırın.。

Temel Kavramlar ve Pratik Sınıflar

Tailwind CSS’yi anlamanın anahtarı, adlandırma sistemini ve çalışma prensiplerini kavramaktır. Sınıf adları genellikle işlevleri tanımlayıcıdır ve tutarlı bir adlandırma desenine uyarlar.

Tepkisel tasarım.

Tailwind, mobil cihazlara öncelik veren bir yanıt veren tasarım sistemi içerir. Herhangi bir işlev sınıfına yanıt veren bir önek ekleyerek, belirli bir kırılma noktasında nasıl görüneceğini belirleyebilirsiniz. Varsayılan kırılma noktası önekleri şunlardır:sm:、md:、lg:、xl:和2xl:。

Örneğin,text-center md:text-leftBu, orta boyutlu ve daha büyük ekranlarda metnin sola hizalanacağı, daha küçük ekranlarda ise ortaya hizalanacağı anlamına gelir. Bunu yapabilirsiniz…tailwind.config.jsDosyalarıntheme.screensBu duraklama noktalarının değerlerinin bir kısmı tamamen özelleştirilebilir.

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.

Durum varyantları

Responsive tasarımın yanı sıra, Tailwind birçok durum varyantını da destekler ve böylece elemanların farklı durumlardaki stilleri için sınıflar tanımlamanıza olanak tanır. En yaygın olanı, bir elemana fare ile gelindiğinde (hover) uygulanan değişikliktir.hover:Odak noktası (focus point)focus:Aktifleme (Activation)active:) vb.

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  点击我
</button>

Bu örnekte, butonların arka planı varsayılan olarak mavidir; fare üzerine geldiğinde koyu maviye dönüşür ve odaklandığında mavi bir hale gelir. Tüm işlevsel sınıflar, belirli durumlar için bu varyasyon öneklerini ekleyerek uygulanabilir.

Pratik amaçlı kombinasyonlar ve özelleştirmeler

Tailwind çok sayıda fonksiyonel sınıf sunsa da, yine de özel stiller oluşturmanız gerekebilir. Bunun için iki temel yol vardır: HTML içinde stilleri doğrudan kullanmak veya CSS dosyalarında özel stil tanımlamaları yapmaktır.@applyKomutların tekrarlanan kalıplarını çıkartın.

Tavsiye edilen okuma Tailwind CSS Türkçe Başlangıç Kılavuzu: Sıfırdan Uzmanlığa, Modern ve responsive web sayfaları oluşturmak。

En yaygın yöntem, bunları doğrudan HTML içinde birleştirmektir:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  ...
</div>

Birden fazla yerde tekrarlanan stil kombinasyonları için, CSS dosyanızda bunları kullanabilirsiniz.@applyBunu özel bir bileşen sınıfı olarak çıkarın.

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.

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

Daha sonra, HTML’de bunu doğrudan kullanabilirsiniz.btn-primaryİşte bu sınıf. Bu yaklaşım, Tailwind’in kullanışlılığını korurken aynı zamanda “DRY” (Kendini tekrarlama) ilkesine de uyum sağlıyor.

Projede uygulama ve optimizasyon yapmak

Modern kullanıcı arayüzleri oluşturmak

Tailwind CSS’yi uygulamak için basit bir kart bileşeni oluşturarak başlayalım. Bu uygulama, ayrıntılı işlevsel sınıfların nasıl tek bir görsel eleman haline getirileceğini gösterecektir.

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="/img/card-top.jpg" alt="Kart resmi">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Kart Başlığı</div>
    <p class="text-gray-700 text-base">
      Bu, Tailwind CSS kullanılarak oluşturulmuş bir karttır. Kenar boşlukları, metin stilleri ve gölgeler gibi çeşitli pratik sınıfları birleştirerek tasarımı hızlı bir şekilde gerçekleştirdik.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"># etiketi 1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"># etiketi 2</span>
  </div>
</div>

Bu kodda hiçbir özel CSS kullanılmamıştır; yalnızca Tailwind’in sınıfları aracılığıyla tam bir görsel yapıya, iç boşluklara, renklere ve düzene sahip bir kart tanımlanmıştır. Sınıf adlarını değiştirerek (örneğin…)bg-whiteDeğiştirin.bg-gray-50Görünümünü kolayca değiştirebilirsiniz.

Üretim ortamı optimizasyonu

Tailwind tarafından varsayılan olarak binlerce işlevsel sınıf oluşturulduğundan, bunların doğrudan üretim ortamında kullanılması CSS dosyalarının boyutunun aşırı artmasına neden olur. Bu nedenle, üretim derleme sürecinde “Purge” (Temizleme) optimizasyonunun etkinleştirilmesi zorunlu bir adımdır.

在tailwind.config.jsDoğru şekilde yapılandırılmış.contentAlanın ardından, üretim derleme komutunu çalıştırdığınızda (örneğin…)NODE_ENV=productionTailwind, belirttiğiniz şablon dosyalarını analiz eder ve yalnızca gerçekten kullanılan sınıfları saklar; kullanılmayan tüm stilleri ise kaldırır. Bu sayede nihai CSS dosyasının boyutu birkaç MB’den birkaç KB’ye kadar düşer ve bu da web sitesinin performansı için son derece önemlidir.

Ayrıca, bunları da tam olarak kullanabilirsiniz.tailwind.config.jsÇin'dekithemeBazı öğeler, renkler, yazı tipleri, aralıklar gibi varsayılan tasarım parametrelerini genişletmek veya değiştirmek için kullanılır; bu sayede tüm projenin tasarım sisteminin tutarlılığı sağlanır. Bunun için eklenti sistemleri gibi araçlardan yararlanılır.@tailwindcss/forms或@tailwindcss/typographyBu, çerçevenin işlevlerini daha da geliştirebilir ve formlar, düzenleme gibi karmaşık senaryolar için daha gelişmiş ve kullanışlı sınıflar sağlayabilir.

Özetle.

Tailwind CSS, benzersiz “pratik öncelikli” metodolojisiyle geliştiricilerin CSS yazma şeklini tamamen değiştirdi. Stil kararlarını bağımsız stil şemalarından işaret dili içine taşıdı ve çok sayıda, küçük ölçekli ve tek bir işlevi olan fonksiyonel sınıfı birleştirerek son derece özelleştirilmiş kullanıcı arayüzleri hızlı bir şekilde oluşturulmasını sağladı. Bu yaklaşım, geliştirme verimliliğini önemli ölçüde artırdı, bağlam değişikliklerini azalttı ve belirlenmiş bir tasarım sisteminin zorunlu kullanımıyla arayüzlerin tutarlılığını garanti etti.

Başlangıçta adlandırma kurallarını ezberlemek ve anlamak gerekebilse de, bir kez öğrenildiğinde geliştirme hızı geleneksel CSS yöntemleriyle kıyaslanamaz. Daha da önemlisi, üretim ortamında yapılan optimizasyonlar sayesinde CSS dosyalarının boyutuyla ilgili potansiyel sorunlar çözülür ve bu da onu büyük, yüksek performanslı web projeleri için mükemmel bir seçenek haline getirir. Geliştirme verimliliği, tasarım özgürlüğü ve nihai performansı arayan ekipler ve bireyler için Tailwind CSS, son derece çekici ve modern bir çözümdür.

Sıkça Sorulan Sorular.

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

Geliştirme modunda, en iyi geliştirme deneyimini sağlamak için Tailwind, tüm olası sınıfları içeren tam bir CSS dosyası oluşturur; bu dosya gerçekten oldukça büyüktür (genellikle birkaç MB boyutundadır).

Ancak üretim ortamında, doğru yapılandırmalar yapılarak…contentBelirtilen yolu takip ederek üretim sürümü (production build) oluşturun; Tailwind, “ağaç sallama” (tree shaking) optimizasyonunu gerçekleştirerek projenizdeki HTML/JSX şablonlarında gerçekten kullanılan sınıfları yalnızca korur. Sonuç olarak oluşturulan CSS dosyası genellikle 10 KB ile 30 KB arasındadır ve hatta birçok elle yazılmış CSS dosyasından bile daha küçüktür. Dosya boyutu konusunda hiç endişelenmenize gerek yoktur.

HTML’de bu kadar çok sınıf adı kullanmak, kodun okunmasını ve bakımını zorlaştırır mı?

Bu, birçok geliştiricinin Tailwind ile ilk kez karşılaştığında ortak olarak yaşadığı bir endişedir. Uygulamalar göstermiştir ki, tek bir elemanın sınıf adları listesi uzun olabilse de, kodun sürdürülebilirliği aslında artmaktadır.

Çünkü artık stil bilgilerini bulmak veya değiştirmek için HTML ve CSS dosyaları arasında gidip gelmenize gerek kalmadı; tüm stil bilgileri tek bir yerde toplandı. Karmaşık sınıf adları kombinasyonları için, okunabilirliği artırmak amacıyla çok satırlı biçimlendirme ve işlevlere göre gruplandırma kullanılabilir. Ayrıca, birden fazla yerde tekrarlanan stil örüntüleri için…@applyBu talimatlar, ilgili verilerin özel bir bileşen sınıfı olarak çıkarılmasını veya JavaScript çerçeveleri (örneğin React, Vue) kullanılarak yeniden kullanılabilir bileşenler haline getirilmesini önerir; böylece kodun düzenli ve okunabilir kalması sağlanır.

Tailwind CSS, React, Vue gibi ön uç (front-end) framework’lerle birlikte kullanılmak için uygundur. Tailwind CSS, temel stil kurallarını ve yapısal özellikleri önceden tanımlayarak geliştirme sürecini kolaylaştırır; bu da bu tür framework’lerle daha iyi entegrasyon sağlar.

Tailwind CSS, React, Vue, Angular gibi modern ön uç (front-end) çerçeveleriyle mükemmel bir uyum sağlar. Aslında, bu çerçevelerin topluluklarında oldukça popülerdir.

Tailwind CSS sınıf adlarını doğrudan JSX veya Vue şablonlarında kullanabilirsiniz. Daha da önemlisi, stilize edilmiş öğeleri yeniden kullanılabilir framework bileşenlerine kolayca dönüştürebilirsiniz. Örneğin, React’ta böyle bir bileşen oluşturabilirsiniz.ButtonBu bileşen, içinde Tailwind sınıfları kullanılarak stil tanımlar; bu sayede tüm uygulama boyunca bu birleşik stildeki butonlar kullanılabilir ve aynı zamanda Tailwind’in esnekliğinden ve çerçevenin bileşen tabanlı yapısından yararlanılabilir. Çerçevenin bileşen sistemi, Tailwind’in tekrarlanan kod bloklarını soyutlama konusundaki eksikliklerini mükemmel bir şekilde giderir.

Temalı renkleri, aralıkları ve diğer tasarım değişkenlerini nasıl özelleştirebilirim?

Özelleştirilmiş temalar çok kullanışlıdır; esas olarak projenin kök dizinindeki dosyaları değiştirerek yapılmaktadır.tailwind.config.jsBunu yapılandırma dosyaları aracılığıyla gerçekleştirebilirsiniz.

Konfigürasyon nesnesinde bunu yapabilirsiniz.themeBazı kısımları genişletebilir veya değiştirebilirsiniz. Örneğin, yeni bir marka rengi eklemek veya varsayılan aralık ölçeğini değiştirmek istiyorsanız, şu şekilde yapabilirsiniz:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Kullanın.extendTailwind’in tüm varsayılan değerlerini korurken, sizin özelleştirdiğiniz öğeler de eklenecektir. Eğer belirli bir kategoriyi (örneğin tüm renk paletini) tamamen değiştirmek istiyorsanız, bunu yapmak için özel öğeleri kullanmanıza gerek yoktur.extendVe doğrudan…theme.colorsYeni bir nesne tanımlayın.