Tailwind CSS Kılavuzu: Başlangıçtan Uzmanlığa Kadar Pratik Teknikler

什么是 Tailwind CSS

Tailwind CSS, pratikliği öncelikli bir CSS çerçevesidir ve HTML içinde doğrudan özelleştirilmiş kullanıcı arayüzleri hızlı bir şekilde oluşturmak için kullanılabilecek, düşük seviyeli ve yapılandırılabilir pratik sınıflar sunar. Bootstrap veya Bulma gibi önceden tasarlanmış bileşenler (butonlar, kartlar vb.) sağlayan çerçevelerden farklı olarak, Tailwind atomize CSS sınıfları sunar; her sınıf genellikle yalnızca bir veya bir grup CSS özelliğine karşılık gelir. Örneğin,.text-center Karşılık gelen text-align: center;，.p-4 Karşılık gelen padding: 1rem;。

Bu “işlevsel sınıf” (functional class) yaklaşımı, geliştiricilerin herhangi bir stil oluşturmak için bu tekil sınıfları birleştirerek işlem yapmalarını sağlar; özel CSS kodları yazmaya gerek kalmaz. Bu, geliştirme hızını önemli ölçüde artırır ve stil dosyalarının boyutlarını küçük tutar, çünkü nihai derleme aracı (“build tool”) kullanılmayan tüm sınıfları otomatik olarak kaldırır.

Temel Kavramlar ve Çalışma Prensibi

Tailwind CSS’in temel kavramlarını anlamak, bu teknolojinin özünü kavramanın anahtarıdır. Tasarım felsefesi, kullanışlılık, birleştirilebilirlik ve duyarlı (reaktif) tasarım etrafında dönmektedir.

Tavsiye edilen okuma Tailwind CSS'e hakim olmak: Girişten uygulamaya kadar pratik bir rehber ve en iyi uygulamalar.。

“Pragmatik öncelikli tasarım felsefesi”

“Pratiklik önceliklidir” (Practicality first) Tailwind’in temel ilkesidir. Bu çerçeve, tek bir işleve sahip, çok sayıda ayrıntılı sınıf (class) sunar. .bg-blue-500、.rounded-lg、.flexGeliştiriciler, bu sınıfları Lego parçaları gibi bir araya getirerek karmaşık bileşenler oluştururlar. Bu yöntem, geleneksel CSS’de her bileşen için anlamlı bir sınıf adı belirlemenin gerekliliğinden kaçınır (örneğin: .user-cardBu sayede, CSS ve HTML dosyaları arasında gidip gelirken oluşan bağlam değişikliğiyle ilgili sorunlar da ortadan kalktı.

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 →

Tepkisel tasarım ve kırılma noktaları.

Tailwind, farklı ekran boyutlarına göre stilleri uygulamak için kullanılabilecek, öneklerle kolayca tanımlanabilen bir yanıt veren (responsive) kırma noktası (breakpoint) sistemi içerir. Varsayılan kırma noktası önekleri şunlardır:sm:、md:、lg:、xl:、2xl:。

Örneğin, bir elementin mobil cihazlarda üst üste gelmesini ve büyük ekranlarda yatay olarak sıralanmasını şu şekilde sağlayabilirsiniz:

<div class="flex flex-col md:flex-row">
  <div>İçerik 1</div>
  <div>İçerik 2</div>
</div>

Bu, varsayılan ayarın (mobil cihazlar için) olduğunu gösteriyor. flex-colDikey yönde, orta boy ekranlarda…md:) ve üzeri flex-row(Yatay yönde.)

Yapılandırma ve Özelleştirme

Tailwind’in varsayılan ayarları, projenin kök dizininde bulunan bir dosya aracılığıyla değiştirilebilir. tailwind.config.js Dosya, derinlemesine özelleştirilebilir. Bu dosyada renk paletini, aralık oranlarını, yazı tiplerini, kesme noktalarını değiştirebilir; hatta yeni ve kullanışlı sınıflar da ekleyebilirsiniz.

Tavsiye edilen okuma Tailwind CSS Öğrenimi: Sıfırdan Başlayarak Modern, Yanıt Veren Web Sayfaları Oluşturma。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Özelleştirdikten sonra, projenizde bunu kullanabilirsiniz. .bg-brand-blue 和 .w-128 Böyle özel sınıflar.

Temel Kullanım ve Kurulum

Tailwind’i kullanmaya başlamadan önce, onu projenize entegre etmeniz gerekmektedir. Tailwind, çeşitli yollarla kurulabilir; en yaygın yöntemlerden biri npm veya yarn kullanmaktır.

PostCSS ile yükleme (tavsiye edilir)

Çoğu modern ön uç projede (örneğin Vite veya Webpack kullanılan projelerde), PostCSS aracılığıyla kurulum yapmak en entegre edilmiş yöntemdir. Öncelikle, npm kullanarak Tailwind ve bağımlılıklarını yükleyin:

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.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Bu işlem, gerekli paketleri yükleyecek ve bir varsayılan ayar oluşturacaktır. tailwind.config.js Konfigürasyon dosyası. Daha sonra, bir PostCSS konfigürasyon dosyası oluşturmanız gerekiyor (örneğin: postcss.config.jsVe Tailwind’i de ekleyin:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Daha sonra, ana CSS dosyanızda (örneğin…) src/styles.cssTailwind CSS komutlarını bu dosyaya (…) ekleyin:

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

Son olarak, projenizin derleme sürecinde PostCSS’in doğru bir şekilde işlendiğinden emin olun. Örneğin, Vite veya Webpack projelerinde PostCSS otomatik olarak okunur. postcss.config.js。

Tavsiye edilen okuma Tailwind CSS’yi Öğrenin: Başlangıçtan Uzmanlığa Kadar Pratik Rehber ve En İyi Uygulamalar。

CDN kullanarak hızlı prototip geliştirme

Hızlı prototipler, sunumlar veya basit HTML dosyaları için CDN (Content Delivery Network) bağlantıları kullanılabilir. Bunun için HTML dosyanızda yalnızca birkaç satır eklemeniz yeterlidir. <head> Aşağıdaki bağlantıları da ekleyin:

<script src="https://cdn.tailwindcss.com"></script>

Dikkat edilmesi gereken bir nokta, CDN (Content Delivery Network) yönteminin özelleştirilebilir yapılandırmaları desteklemediği ve kullanılamadığıdır. @apply Bu dosya, tüm stilleri içerdiği için oldukça büyüktür ve üretim ortamında kullanılması önerilmez.

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.

Üretim optimizasyonu ile ilgili yapı oluşturma.

Geliştirme sürecinde, Tailwind tüm olası sınıfları içeren devasa bir CSS dosyası oluşturur. Üretim ortamı için, kullanılmayan tüm sınıfları kaldırmak amacıyla derleme sürecinin (build process) çalıştırılması gerekmektedir; bu işlem, HTML ve JavaScript bileşenlerinde yer alan ancak gerçekte kullanılmayan sınıfların temizlenmesini sağlar. tailwind.config.js Orada, yoluyla… content Bu alanlar, Tailwind’e hangi dosyaların taranması gerektiğini, böylece kullanılan sınıfların bulunabileceğini belirtir.

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

Ardından derleme komutunu çalıştırın (örneğin: npm run buildTailwind CLI veya PostCSS eklentileri, yalnızca gerekli sınıfları içeren, minify edilmiş bir CSS dosyası oluşturur.

İleri Düzey Teknikler ve En İyi Uygulamalar

Temelleri öğrendikten sonra, bazı ileri seviye teknikler sayesinde Tailwind’i daha verimli ve daha estetik bir şekilde kullanabilirsiniz.

Bileşenleri çıkarmak ve @apply komutunu kullanmak

Her ne kadar HTML içinde doğrudan sınıfları birleştirmek Tailwind’in temel yaklaşımı olsa da, belirli bir sınıf kombinasyonu (örneğin belirli bir stildeki bir buton) projede birden fazla kez tekrarlandığında, uzun bir sınıf dizisinin tekrarlanarak yazılması gereksiz ve verimsiz olabilir. Bu durumda, şu yöntemi kullanabilirsiniz: @apply CSS kodunuzdan tekrar kullanılabilir bileşen sınıflarını ayıklayın.

/* 在你的 CSS 文件中 */
.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 sadece bunu kullanmanız yeterli. class="btn-primary" Bu yeterli. Tailwind felsefesine daha uygun bir başka yaklaşım ise, React, Vue gibi JavaScript çerçevelerinin bileşenleştirme özelliklerini kullanarak tekrar kullanılabilir UI bloklarını oluşturmaktır.

Duraklama, odaklanma gibi durumları işleme

Tailwind, çeşitli etkileşim durumları için değişken ön ekler sağlar, örneğin… hover:、focus:、active:、disabled:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  按钮
</button>

Ayrıca yapılandırmalar yaparak da bunu gerçekleştirebilirsiniz. tailwind.config.js Çin'deki variants Bazı durum varyantlarını belirli pratik sınıflar için etkinleştirmek veya devre dışı bırakmak amacıyla kullanılır.

JavaScript çerçevesi ile birlikte kullanılır.

Tailwind, React, Vue, Angular gibi popüler ön uç (front-end) çerçeveleriyle mükemmel bir şekilde entegre olabilir. React’ta, her zamanki gibi JSX içinde Tailwind özelliklerini kullanabilirsiniz. className Özniteliklerde Tailwind sınıfları kullanılır. Sınıf adlarının dinamik olarak birleştirilmesini işlemek için, şöyle bir şey kullanılabilir: clsx 或 classnames Böyle bir araç kitabı.

function Button({ isPrimary, children }) {
  const classes = clsx(
    'py-2 px-4 rounded-lg font-semibold',
    isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
  );
  return <button className={classes}>{children}</button>;
}

Özel eklentiler kullanarak genişletme yapın.

Eğer siz veya ekibiniz, Tailwind’de mevcut olmayan belirli ve kullanışlı sınıflara ihtiyaç duyarsanız, özel eklentiler yazabilirsiniz. Eklentiler, bu sınıfları Tailwind’in mevcut yapısına entegre ederek sistemin işlevselliğini genişletebilir. tailwind.config.js Buraya yeni pratik sınıflar, bileşenler veya temel stiller ekleyebilirsiniz.

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* 隐藏滚动条的 CSS */
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
        },
      })
    })
  ]
}

Özetle.

Tailwind CSS, kullanışlı ve önceliklere dayalı bir yaklaşımı sayesinde geliştiricilerin CSS yazma şeklini tamamen değiştirdi. Stil kararlarını stil şemalarından işaret dili içine taşıyarak, çok sayıda ince ayarlı işlevsel sınıfın kombinasyonuyla yüksek geliştirme verimliliği ve tasarım tutarlılığı sağlar. Güçlü yapılandırma sistemi, herhangi bir tasarım sistemine uyum sağlamak için derinlemesine özelleştirmelere olanak tanır; ayrıca derleme sırasındaki optimizasyonlar, nihai ürünün hafif ve etkili olmasını garanti eder. İster hızlı prototip geliştirme isterse büyük ve karmaşık projeler olsun, Tailwind CSS güçlü, esnek ve sürdürülebilir bir stil çözümü sunar. Temel kavramlarını, iş akışlarını ve ileri düzey tekniklerini öğrenmek, modern ön uç geliştirmede sizin için büyük bir avantaj olacaktır.

Sıkça Sorulan Sorular.

Tailwind CSS’nin stilleri HTML’yi bozar mı?

Tailwind CSS’teki sınıf adları, HTML’nin birçok içerik içerdiğini gösterse de bu, geleneksel anlamda bir “stil kirliliği” değildir. Bu tasarım bilinçli olarak yapılmıştır; stil mantığını görünüm katmanında toplar, CSS ve HTML arasında gidip gelme gereksinimini ortadan kaldırır ve stil ile yapı arasında sıkı bir bağlantı kurulmasını sağlar. Bu durum, bileşen tabanlı geliştirme (component-based development) açısından aslında bir avantajdır.

Tailwind CSS’nin varsayılan sınıflarını nasıl geçersiz kılabilir veya özelleştirebilirsiniz?

Esas olarak iki yöntem var. İlk olarak, şunları yapabilirsiniz: tailwind.config.js Dosyaların theme.extend Bazı tema değerleri (örneğin renk, aralık) eklenir veya genişletilir; bu durumda yeni sınıflar oluşturulur. İkincisi, bir varsayılan değeri tamamen değiştirmek istiyorsanız, bunu yapabilirsiniz. theme Bazıları (tümü değil) extendYeni değeri doğrudan ayarlayın. Tek seferlik bir değişiklik için, herhangi bir değeri parantezler kullanarak eklemek de bir seçenektir; örneğin: top-[117px]。

`@apply` kullanarak bileşenleri çıkarmak ile doğrudan CSS yazmak arasındaki fark nedir?

Kullanın. @apply Komut çıkarma sınıfları, esasen Tailwind’in pratik sınıflarının bir koleksiyonudur; bu sınıflar Tailwind yapılandırmalarından etkilenir ve sonunda derleme araçları tarafından işlenir. Buna karşın, doğrudan saf CSS yazmak Tailwind ekosisteminden bağımsızdır. Aşırı kullanımı ise olumsuz sonuçlara yol açabilir. @apply Bu durum, geleneksel CSS yazım yöntemlerine geri dönmenize neden olabilir ve Tailwind’in “HTML içinde sınıfları birleştirme” ilkesine aykırı olabilir. Bu özelliğin yalnızca belirli bir stil kombinasyonunun gerçekten sık sık tekrarlandığı durumlarda dikkatli bir şekilde kullanılması önerilir. @apply。

Tailwind CSS’in üretim ortamındaki performansı nasıldır?

Doğru bir şekilde oluşturulduktan ve “ağaç sallama” (tree shaking) optimizasyonu uygulandıktan sonra, Tailwind CSS’in performansı gerçekten mükemmeldir. Oluşturma aracı, tüm kaynak kod dosyalarınızı tarar, gerçekten kullanılan sınıfları belirler ve yalnızca bu sınıfları nihai CSS dosyasına ekler. Bu sayede, kullanıcılara teslim edilen CSS dosyasının boyutu, elle yazılmış CSS veya optimize edilmemiş bileşen kütüphaneleri kullanan CSS dosyalarına kıyasla genellikle çok daha küçüktür; bu da sayfa yükleme hızını artırır.

Tailwind, UI bileşen kütüphaneleriyle birlikte kullanılmak için uygun mudur?

Bu, belirli duruma bağlıdır. Tailwind kendisi zaten eksiksiz bir stil çözümüdür ve genellikle başka bir eksiksiz UI bileşen kütüphanesine (örneğin Material-UI) ihtiyaç duymaz. Ancak, Tailwind temelinde oluşturulmuş bileşen kütüphanelerini kullanabilirsiniz; örneğin Headless UI (stilsiz etkileşim bileşenleri sunar) veya DaisyUI (stilli bileşenler sunar). Bu kütüphaneler, Tailwind’in temaları ve araç sınıflarıyla sorunsuz bir şekilde entegre olur ve geliştirme hızınızı daha da artırabilir.