Tailwind CSS kapsamlı rehberi: Sıfırdan uzmanlığa kadar pratik bir öğretici.

什么是 Tailwind CSS

Modern web siteleri oluştururken, stilleri verimli ve tutarlı bir şekilde yazmak geliştiriciler için her zaman temel bir zorluk olmuştur. Tailwind CSS, işlevselliği öncelikli bir CSS çerçevesidir ve son derece birleştirilebilir, düşük seviyeli araç sınıfları sunar. Bu araçlar sayesinde, belgenizden ayrılmadan veya çok fazla özel CSS yazmadan doğrudan HTML etiketlerinde özelleştirilmiş tasarımlar hızlı bir şekilde oluşturabilirsiniz.

Geleneksel çerçevelerden (örneğin Bootstrap) farklı olarak, Tailwind CSS önceden paketlenmiş bileşenler (butonlar, kartlar vb.) sağlamak yerine, tek bir göreve odaklanan temel araç sınıfları sunar. Örneğin, bunları kullanabilirsiniz… text-center Metni merkeze almak için şunu kullanın: p-4 İç boşluğu ayarlamak için kullanabilirsiniz, veya… bg-blue-500 Mavi bir arka plan ayarlayalım. Bu “atomize CSS” (parçalı CSS) yaklaşımı büyük bir esneklik sunar; bu araç sınıflarını birleştirerek istediğiniz her türlü özgün bileşeni oluşturabilirsiniz. Böylece, bir framework’un varsayılan stilleri tarafından sınırlanmazsınız ve sürekli büyüyen CSS dosyalarıyla uğraşmak zorunda kalmazsınız.

Önemli dosya, yapılandırma dosyasıdır. tailwind.config.jsBu dosya aracılığıyla, renkler, aralıklar, yazı tipleri, kırılma noktaları gibi tüm tasarım öğelerini kapsamlı bir şekilde özelleştirebilir ve böylece tüm projenin görsel olarak yüksek derecede tutarlı olmasını sağlayabilirsiniz.

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Başlangıçtan Uzmanlığa Kadar – Pratik ve Atomize CSS Çerçevesi。

Nasıl yüklenir ve yapılandırılır?

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

Çoğu modern ön uç projede, paket yöneticileri aracılığıyla yükleme en yaygın ve önerilen yöntemdir. Bu, bağımlılıkları kolayca yönetmenizi ve bunları derleme araçlarıyla entegre etmenizi sağlar. npm kullanan projeler için, yükleme komutunu projenin kök dizininde çalıştırabilirsiniz. Temel yükleme paketleri şunlardır: tailwindcss。

npm install -D tailwindcss
npx tailwindcss init

İlk komut, Tailwind CSS’yi projenize bir geliştirme bağımlılığı olarak yükleyecektir. İkinci komut… npx tailwindcss init Bu durumda, sizin için bir varsayılan yapılandırma dosyası oluşturulacaktır. tailwind.config.jsBu dosya Tailwind’in çekirdeğidir ve tüm özelleştirmeler buradan başlar.

Yapılandırma süreci (Configuration process)

Kurulum tamamlandıktan sonra, Tailwind’in HTML dosyalarınızı işleyebilmesi ve nihai CSS’yi oluşturabilmesi için derleme sürecini yapılandırmanız gerekmektedir. Bu genellikle ana CSS dosyanızda yapılır. @tailwind Komutu yerine getirmek için. Adı “” olan bir şey oluşturun. src/input.css Belirtilen dosyayı (adı ve yolunu kendiniz belirleyebilirsiniz) oluşturun ve aşağıdaki içeriği ekleyin:

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

Bu üç komut sırasıyla Tailwind’in üç farklı seviyesine karşılık gelmektedir: Temel stiller, bileşen sınıfları ve araç sınıfları. Daha sonra, bu dosyayı işlemek için bir derleme aracı (örneğin Vite, Webpack veya PostCSS CLI) kullanmanız gerekmektedir. Örneğin, PostCSS CLI kullanırken, aşağıdakileri yapmanız gerekecektir: package.json Bir oluşturma betiği ekleyin ve bunun mevcut olduğundan emin olun. postcss.config.js Dosya, içinde şunları barındırmaktadır: tailwindcss Eklenti.

Üretim ortamını optimize etmek

Üretim ortamındaki CSS dosyalarının mümkün olduğunca küçük kalmasını sağlamak için Tailwind, “Kullanılmayan Stilleri Temizle” adında bir teknik kullanır. Bu, sizinin… tailwind.config.js Dosyaların content Özniteliklerde, Tailwind sınıf adlarını içeren tüm kaynak dosya yolları belirtilmelidir. Aşağıda bir yapılandırma örneği verilmiştir:

Tavsiye edilen okuma Tailwind CSS’yi Derinlemesine Öğrenmek: Temel Kavramlardan Gerçek Proje Geliştirmeye Kadar Rehber。

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

Bu şekilde, Tailwind derleme sırasında bu dosyalardaki tüm sınıf adlarını tarar ve yalnızca kullanılan araç sınıflarını nihai CSS dosyasına dahil eder; bu da dosya boyutunu önemli ölçüde azaltır.

Çekirdek Araç Sınıfları ve Pratik Püf Noktaları

Düzenlemeyi ve aralıkları iyi kavramak

Düzenleme ve aralıklar, bir arayüz oluşturmanın temel taşlarıdır. Tailwind, elemanların düzenlenmesini ve mekansal ilişkilerini kontrol etmek için oransal bir sisteme dayalı kapsamlı bir araç seti sunar. Eleman türlerini kontrol etmek için şunları kullanabilirsiniz: block、inline-block、flex、grid Hızlı bir şekilde görünüm modunu ayarlamak için bekleyin. Hem Flexbox hem de Grid düzenlemeleri için ilgili araç sınıfları mevcuttur. justify-center、items-center、grid-cols-3 vs.

Aralık sistemi özellikle güçlüdür. Tek bir ölçeklendirme oranı kullanır (varsayılan olarak 0.25rem’ye dayanır).p-4 1rem genişliğinde bir dolgu (padding) ifade eder.m-2 0,5rem genişliğinde bir kenar boşluğunu ifade eder. Ayrıca, bu kenar boşluğunun hangi yönde olacağı da açıkça belirtilmiştir.pt-4 Bu “padding-top” değil.mx-auto Yatay yönde kenar boşluğu otomatik olarak ayarlanır ve genellikle blok düzeyindeki elementlerin merkezlenmesi için kullanılır. Bu sınıfları sistematik bir şekilde kullanmak, tüm sayfanın aralıklarının uyumlu ve tutarlı olmasını sağlar.

Renkleri ve düzenlemeyi esnek bir şekilde kontrol edin.

Görsel tasarımda renkler ve düzenleme çok önemlidir. Tailwind, sayısal gradyanlar aracılığıyla organize edilmiş, zengin ve estetik bir palet içerir. Örneğin,text-gray-700 Koyu gri renkli metinler için kullanılır.bg-red-100 Sarımsı kırmızı arka plan için kullanılır.border-blue-300 Açık mavi bir kenarlık için kullanılır. Ayrıca… tailwind.config.js 的 theme.extend Bazı renkler kolayca eklenir veya üzerine yazılır.

Dizgi (typography) açısından, araç kategorisindeki uygulamalar yazı tipi boyutu, kalınlığı, satır aralığı, harf aralığı gibi tüm özellikleri kapsamaktadır.text-xl “Temsil eden çok büyük font” (Representing very large fonts).font-bold Koyu yazı, bir temsilciyi gösterir.leading-relaxed Bu, geniş bir satır yüksekliğini temsil eder.Responsive (uyumlu) tasarım da dahildir; sadece sınıf adının önüne bir “breakpoint” (kesme noktası) ön eki eklemeniz yeterlidir. md:text-lgBu stil, orta boyutlu ve daha büyük ekranlarda kullanılabilir; böylece mobil cihazlara öncelik veren bir iş akışı sağlanır.

Stil kombinasyonları ve yeniden kullanımı

Projenin büyümesiyle birlikte, HTML içinde aynı araç sınıfı kombinasyonlarını tekrar tekrar yazmak hem zaman alıcı hem de sürdürülmesi zor hale gelir. Tailwind, stilleri yeniden kullanmak için birkaç çözüm sunar. En basit yöntem, bunları doğrudan HTML içinde birleştirmektir. Ancak karmaşık bileşenler için, bunun yerine başka yöntemlerin kullanılması önerilir. @apply Komut, CSS dosyanızdaki ortak stilleri çıkarır.

Tavsiye edilen okuma Tailwind CSS Kılavuzu: Sıfırdan Başlayarak Modern ve Profesyonel Ön Uç Stilleri Oluşturma。

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

Böylece, HTML içinde bunu kullanabilirsiniz. class="btn-primary"Hem Tailwind’in esnekliğini koruyor hem de CSS’in yeniden kullanılabilirliğinden yararlanılıyor. Daha güçlü bir yöntem ise, stil ve yapıyı kapsamlamak için JavaScript çerçeveleri (örneğin React, Vue)’nin bileşen sistemlerini kullanmaktır.

Tepkisel tasarım ve etkileşim durumu.

Mobil öncelikli, duyarlı (responsive) kırılma noktaları (breakpoints)

Tailwind CSS, mobil cihazlara öncelik veren bir responsive (uyumlu) tasarım stratejisi benimser. Bu, önek içermeyen araç sınıflarının (utility classes) tüm ekran boyutlarında etkin olduğu anlamına gelir; önek içeren sınıflar ise yalnızca belirli ekran özelliklerine göre uyarlanır. md:, lg:Bu durum, belirtilen durak noktasından itibaren ve sonrasında geçerli olacaktır. Çerçeve, beş adet durak noktası ile gelir:sm (640px)md (768px)lg (1024px)xl (1280px) ve 2xl (1536px).

Örneğin, bir… w-full md:w-1/2 lg:w-1/3 Bu konteyner, telefonlarda tüm genişliği kaplar; tabletlerde (MD boyutunda) genişliğinin yarısına, masaüstlerinde (LG boyutunda) ise genişliğinin üçte birine düşer. Bunu yapabilirsiniz. tailwind.config.js 的 theme.screens Bu kesme noktalarının bazı değerlerini tamamen özelleştirerek tasarım ihtiyaçlarınıza uyum sağlayabilirsiniz.

Duraklatma, odaklanma gibi durumları işleme

Modern web uygulamaları, zengin etkileşim geri bildirimlerine ihtiyaç duyar. Tailwind, farklı durumlar için uygulamalara stil kazandırmanızı kolaylaştıran “durum değişkenleri” (state variables) sunar. Bunun için yalnızca araç sınıflarının (utility classes) önüne ilgili durum öneklerini eklemeniz yeterlidir. Örneğin,hover:bg-gray-100 Fare üzerine geldiğinde arka plan rengi uygulanacaktır.focus:ring-2 Bir elemana odaklandığında, etrafına halka şeklinde bir kontur eklenir.

Bunun dışında… hover 和 focusAyrıca… active、disabled、group-hover(Üst öğeye fare ile gelindiğinde alt öğelerin stilinin değişmesi gibi.) Form elemanları için de aynı durum geçerli. checked、required Belirli durumları bekler. Bu durum varyantları, diğer araç sınıflarıyla serbestçe birleştirilebilir; böylece tek bir satır özelleştirilmiş JavaScript kodu veya karmaşık CSS seçicileri yazmadan son derece etkileşimli arayüzler oluşturabilirsiniz.

Koyu modu kullanın.

İşletim sistemi seviyesinde koyu modun yaygınlaşmasıyla birlikte, web sitelerine koyu temalar sunmak standart bir gereksinim haline geldi. Tailwind CSS, koyu mod desteğini içerisinde barındırmaktadır. Sadece… tailwind.config.js Ayarlar bölümünde… darkMode: 'class'(Veya) 'media'Sonra kullanabilirsiniz. dark: Koyu moddaki stilleri tanımlamak için çeşitli varyasyonlar kullanılır.

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <!-- 内容 -->
</div>

Seçim yapıldığında… 'class' Strateji belirlerken, JavaScript kullanarak HTML belgesinin kök elementinde (root element) bazı işlemler yapmanız gerekebilir.Ekle veya kaldır. class="dark" Konuyu değiştirelim. Bu yöntemle konu değişikliğini tamamen siz kontrol edersiniz, çok esnektir.

Özetle.

Tailwind CSS, öncelikli işlevselliklere ve atomize sınıf adlarına dayalı bir sistem aracılığıyla, geliştiricilerin CSS yazma şeklini temelden değiştirmiştir. Önceden tanımlanmış bileşenleri terk ederek, geliştiricilere eşsiz bir tasarım özgürlüğü ve hızlı bir geliştirme süreci sunar. Kurulum ve yapılandırmadan, temel araç sınıflarını öğrenmeye, duyarlı tasarım ve karmaşık etkileşim durumlarını gerçekleştirmeye kadar, Tailwind sistematik ve yapılandırılabilir çözümler sunar. Kullanılmayan stilleri temizleme özelliği, nihai ürünün verimliliğini sağlarken, derin özelleştirme yeteneği de onun herhangi bir tasarım sistemine mükemmel bir şekilde entegre edilmesini mümkün kılar. Başlangıçta bazı sınıf adlarını ezberlemeniz gerekebilir; ancak bir kez öğrendiğinizde, geliştirme verimliliği ve tutarlılık açısından geleneksel CSS yazım yöntemleriyle kıyaslanamaz. Hızlı prototip tasarımı yapmak istiyorsanız da, büyük ve uzun süreli olarak sürdürülebilecek üretim seviyesinde uygulamalar geliştirmek istiyorsanız da, Tailwind CSS son derece değerli ve modern bir araçtır.

Sıkça Sorulan Sorular.

Tailwind CSS ve Bootstrap arasındaki temel farklar nelerdir?

Tailwind CSS, önceden tasarlanmış bileşenler (butonlar, navigasyon çubukları vb.) sunmayan, “headless” (kafa olmayan) bir araç sınıfı çerçevesidir. Yalnızca düşük seviyeli CSS araç sınıfları sağlar ve böylece tamamen özgürce özelleştirilmiş tasarımlar oluşturmanıza olanak tanır. Bootstrap ise, belirli bir görünüme sahip birçok hazır bileşen sunan bir bileşen kütüphanesidir; bu bileşenleri doğrudan kullanabilir veya temalarını özelleştirebilirsiniz. Tailwind, daha yüksek derecede özelleştirilebilir tasarımlara ihtiyaç duyan projeler için daha uygundur; Bootstrap ise hazır olarak kullanılabilir ve daha hızlı bir şekilde tutarlı bir arayüz oluşturmanıza yardımcı olur.

Büyük projelerde, HTML sınıf adlarının çok uzun olması bakımı zorlaştırır mı?

Bu, gerçekten de geliştiricilerin başlangıç aşamasında sıkça karşılaştığı bir endişedir. Pratikte, mantıklı bir bileşenleme yaklaşımıyla bu sorun kolayca çözülebilir. React, Vue gibi çerçevelerde, uzun sınıf listelerini bileşenlerin içine kapsayabilirsiniz. Ayrıca, @apply CSS’te tekrarlanan stil kombinasyonlarını ayıklamak da resmi olarak önerilen bir uygulamadır. Bu yöntemler, HTML’nin okunabilirliğini sağlarken aynı zamanda Tailwind’in atomize (bölünmüş, küçük parçalardan oluşan) stil yapısının avantajlarını da korur. Aslında, stil mantığının HTML öğeleri üzerinde toplanması sayesinde, büyük projelerde stil aramak ve bunları değiştirmek, geniş CSS dosyalarında bunu yapmaya kıyasla daha kolay ve yönetilebilir hale gelir.

Temayı nasıl özelleştirerek renklerini veya aralıklarını değiştirebilirim?

Tüm özelleştirmeler, projenin kök dizininde bulunmaktadır. tailwind.config.js Dosya içinde işlemler tamamlandı. Artık kullanabilirsiniz. theme.extend Nesneye yeni değerler ekleyerek varsayılan temayı genişletebilirsiniz, veya… theme Nesne içinde mevcut değerler doğrudan değiştirilir. Örneğin, bir marka rengi eklemek istiyorsanız şu şekilde yapılandırabilirsiniz:theme: { extend: { colors: { brand: '#0fa9e6', } } }Daha sonra, bunu kullanabilirsiniz. bg-brand、text-brand Sınıf adlarını bekliyoruz. Aralıklar, yazı tipleri, kırılma noktaları gibi tüm tasarım ile ilgili ayarlar da benzer bir şekilde özelleştirilebilir.

Tailwind tarafından oluşturulan CSS dosyalarının boyutu büyük olabilir mi?

Geliştirme modunda, tüm olası araç sınıflarını içermek için Tailwind’in CSS dosyaları gerçekten oldukça büyük olabilir (yaklaşık birkaç MB). Ancak bu bir sorun değil, çünkü üretim ortamında kullanılacak CSS, “kullanılmayan stilleri temizleme” adı verilen bir optimizasyon sürecinden geçirilir. Doğru şekilde yapılandırıldığında… tailwind.config.js Çin'deki content Özellikler açısından, Tailwind’in oluşturma aracı şablon dosyalarınızı tarar ve yalnızca gerçekten kullanılan araç sınıflarını paketler. Bu nedenle, nihai üretim sürümü CSS dosyaları genellikle çok küçüktür; sadece birkaç KB ile birkaç on KB arasındadır ve diğer CSS çerçevelerine kıyasla oldukça rekabetçidir.