Anasayfa./Bilgi./Web sitesi oluşturma./İçerik detayları.

Tailwind CSS başlangıç uygulama rehberi: Basit ve verimli modern web sitesi arayüzleri oluşturma.

2 dakika okuma.
2026-03-13
2,103
Aşağıdaki bağlantılar üzerinden alışveriş yaptığınızda, sizin için ek bir maliyet olmadan komisyon kazanıyorum.

什么是 Tailwind CSS

Tailwind CSS, özelleştirilmiş kullanıcı arayüzleri oluşturmak için hızlı ve pratik bir şekilde kullanılan, işlevselliğe öncelik veren bir CSS çerçevesidir. Geleneksel CSS çerçevelerinden en büyük farkı, hazır ve semantik UI bileşenleri (butonlar, kartlar vb.) sunmamasıdır. Bunun yerine, geliştiricilerin HTML içinde bu stil sınıflarını doğrudan birleştirerek her türlü tasarımı gerçekleştirebilecekleri temel, atomik stil sınıfları sunar. Bu yaklaşım, HTML ve CSS dosyaları arasında sürekli gidip gelme ihtiyacını ortadan kaldırarak geliştirme verimliliğini büyük ölçüde artırır ve seçim alanını sınırlayarak tutarlı bir tasarımın doğal bir şekilde sağlanmasını sağlar.

Temel fikri “işlevselliğin önceliği”dir. Bu çerçeve, her biri genellikle yalnızca bir CSS özelliğine karşılık gelen, çok sayıda ayrıntılı sınıf sunar. Örneğin,.bg-blue-500 Arka plan rengini belirli bir maviye ayarlayın..p-4 İç boşluğu 1rem olarak ayarlayın..rounded-lg Daha büyük köşe yuvarlaklıkları ayarlayın. Geliştiriciler, bu sınıfları Lego parçaları gibi bir araya getirerek, tek bir satır özel CSS kodu yazmaya gerek kalmadan benzersiz ve duyarlı (responsive) kullanıcı arayüzleri (UI’ler) oluşturabilirler.

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

Tailwind CSS’i projenize entegre etmenin birçok yolu vardır; en yaygın ve önerilen yöntemlerden biri, komut satırı aracı (CLI – Command Line Interface) aracılığıyla veya Vite, Webpack gibi derleme araçlarıyla entegrasyondur.

Tavsiye edilen okuma Tailwind CSS’in Temel Becerilerini Öğrenin: Pratik Araçlardan Verimli Komponent Geliştirme Rehberine。

PostCSS ile yükleme (tavsiye edilir)

Çoğu modern ön uç projede, PostCSS eklentileri aracılığıyla kurulum yapmak en iyi uygulamadır. Bu, Tailwind’in JIT (Anında Derleme) motorundan yararlanmanıza ve Autoprefixer gibi diğer PostCSS eklentileriyle sorunsuz bir şekilde çalışmanıza olanak tanır. Öncelikle, gerekli paketleri npm veya yarn kullanarak yükleyin.

WordPress.com web sitesi oluşturma yardımcısı.
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.
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 postcss autoprefixer
npx tailwindcss init

Bu işlem, Tailwind CSS, PostCSS ve Autoprefixer’i kuracak ve ayrıca varsayılan bir yapılandırma dosyası oluşturacaktır. tailwind.config.jsArdından, projenizin CSS giriş dosyasında (genellikle…) src/styles.css 或 app/globals.cssTailwind CSS komutlarını sayfanın üst kısmına ekleyin.

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

Daha sonra, PostCSS yapılandırma dosyanızda (örneğin: postcss.config.jsEkleme: Belirtilen metnin içine eklemeler yapılmalıdır. tailwindcss 和 autoprefixer Eklentiler… Son olarak, oluşturma aracınızın (örneğin Vite) PostCSS ayarlarını doğru bir şekilde yüklediğinden emin olun. Artık HTML dosyalarınızda Tailwind’in kullanışlı sınıflarını kullanmaya başlayabilirsiniz. Oluşturma komutunu çalıştırdıktan sonra, Tailwind projenizdeki tüm sınıfları tarar ve optimize edilmiş, en küçük boyutta bir CSS dosyası oluşturur.

CDN kullanarak hızlı bir deneyim yaşayın.

Eğer sadece Tailwind’i hızlıca denemek veya basit bir HTML sayfasında kullanmak istiyorsanız, Play CDN’sini kullanabilirsiniz. Bunu yapmak için HTML kodunuzda şu satırı eklemeniz yeterlidir: <head> Etikete bir şey ekleyin. <script> Sadece etiketi kullanmanız yeterli.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 你的内容 -->
</body>
</html>

Bu yöntem oldukça kullanışlıdır, ancak üretim ortamında kullanılması önerilmez; çünkü performans, boyut ve özellikler (örneğin JIT derleme, eklentiler vb.) sınırlıdır.

Tavsiye edilen okuma Tailwind CSS’yi Öğrenmek: Acemiden Uzman’a Kadar Temel Kavramlar ve Pratik Teknikler Rehberi。

Temel ve kullanışlı sınıfları ve duyarlı (responsive) tasarımı öğrenin.

Tailwind CSS’in yetenekleri, geniş ve kullanışlı sınıf koleksiyonları üzerine kuruludur. Adlandırma kurallarını anlamak, bu aracı verimli bir şekilde kullanmanın anahtarıdır.

Yaygın olarak kullanılan stil kategorileri

Sınıf adları sezgisel bir formata uyar:{属性}{方向？}-{尺寸}Örneğin:
* 间距： .p-4 padding: 1rem; .mt-2 (margin-top: 0.5rem) .space-x-4 (Alt öğeler arasındaki yatay aralık).
*Düzenleme:* .text-lg (Büyük harf boyutu), .font-bold (Kalın yazı), .text-center (Metin ortalanmıştır.)
* 颜色： .bg-gray-100 (Arka plan rengi) .text-blue-600 (Metin rengi) .border-red-300 (Çerçeve rengi). Renkler genellikle sayısal kodlarla (50-900) ifade edilir ve bu kodlar rengin koyuluğunu belirtir.
* 布局： .flex, .grid, .block, .hidden。
* 尺寸： .w-full (Genişlik: 100%) .h-64 (Yükseklik: 16rem).
* 效果： .rounded-md (Orta yuvarlak köşeler), .shadow-lg (Büyük Gölge) .opacity-50 (50% Şeffaflık).

Tepkisel kırılma noktalarını uygulamak.

Tailwind, mobil cihazlara öncelik veren bir kırılma noktası (breakpoint) sistemi kullanır. Varsayılan kırılma noktası önekleri şunlardır:sm: (640px) md: (768px) lg: (1024px) xl: (1280px) 2xl: (1536px). Farklı ekran boyutları için stilleri tanımlamak amacıyla, herhangi bir pratik sınıfın (utility class) önüne bu önekleri ekleyebilirsiniz.

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.
Web sitesi oluşturma asisti LOGO. Bluehost'a erişin.

Örneğin, bir elementin telefonlarda yukarıdan aşağıya doğru yığılı bir şekilde görüntülenmesi, orta boyutlu ekranlarda ise yatay olarak düzenlenmesi şu şekilde yazılabilir:

<div class="flex flex-col md:flex-row">
  <div class="p-4">Blok Bir</div>
  <div class="p-4">Blok İki</div>
</div>

Bu kodda,flex-col Bu, mobil cihazlar için varsayılan stildir. md:flex-row Belirtmektedir ki… md Durdurma noktası ve daha üst seviyelerde, düzenleme yönü satır haline gelir.

Gelişmiş Özellikler ve Özelleştirilebilir Yapılandırmalar

Tailwind CSS’in en güçlü yanı, son derece özelleştirilebilir olmasıdır. Yapılandırma dosyaları aracılığıyla onu genişletebilir ve değiştirebilir, böylece projenizin tasarım ihtiyaçlarına tam olarak uyum sağlar.

Tavsiye edilen okuma Tailwind CSS’de Uzmanlaşmak: Atomik CSS Çerçevesinin Prensiplerinden Verimli Kurumsal Proje Geliştirme Uygulamalarına。

Konu Özelleştirme ve Genişletme

Çekirdek yapılandırma dosyasıdır. tailwind.config.jsBurada, varsayılan tema ayarlarını değiştirebilirsiniz. Örneğin, renkleri, yazı tiplerini, aralıkları ve diğer tasarım öğelerini genişletebilir veya değiştirebilirsiniz.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1d4ed8',
        'brand-green': '#10b981',
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        'sans': ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Yapılandırmayı tamamladıktan sonra, özel sınıf adlarını kullanabilirsiniz, örneğin: .bg-brand-blue 或 .font-sans。extend Anahtar kelimeler, mevcut konunun üzerine eklenir; tamamen yerine geçmezler.

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.
LOGOSU. Hosting.com'u ziyaret edin.

Component Çıkarma ve Kullanım Talimatları

Pratik sınıfların doğrudan HTML içinde kullanılması teşvik edilse de, bazı sınıflar projede tekrar tekrar kullanıldığında (örneğin belirli bir stildeki butonlar için), bunlar yeniden kullanılabilir bileşenler olarak ayrılabilir. Tailwind’de bu genellikle… @apply Komutlar CSS içinde gerçekleştirilir.

/* 在你的 CSS 文件中 */
.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, HTML’de sadece bunu kullanmanız yeterli. class="btn-primary" Bu yeterlidir. Daha modern ve çerçevelerle daha iyi entegre olabilen bir başka yöntem ise, bu stilleri JavaScript bileşenleri (örneğin React, Vue bileşenleri) kullanarak kapsamlamaktır.

Ayrıca, bunu CSS’de de kullanabilirsiniz. @layer Komut: Özel stil ayarlarını Tailwind CSS’e ekleyin. base、components 或 utilities Katmanlar arasında, doğru yükleme sırasının ve erişilebilirliğin sağlanması için… @apply Alıntı.

@layer components {
  .card {
    @apply bg-white p-6 rounded-xl shadow-md;
  }
}

Özetle.

Tailwind CSS, işlevsel önceliklere ve atomize sınıflara dayalı tasarım felsefesiyle CSS yazma şeklimizi tamamen değiştirdi. Kullanıcı arayüzü (UI) geliştirme verimliliğini ve tutarlılığını büyük ölçüde artırdı; geliştiricilere, karmaşık duyarlı (responsive) tasarımları doğrudan işaretleme dili (markup language) içinde gerçekleştirme imkanı sundu. Projeye PostCSS aracılığıyla entegrasyondan, temel kullanışlı sınıfları ve duyarlı özellikleri öğrenmeye, tema ayarlarını derinlemesine yapılandırmaya ve yeniden kullanılabilir bileşenler oluşturmaya kadar, bu araç seti başlangıçtan uzmanlığa kadar kapsamlı bir yol sunar. Başlangıçta bazı sınıf adlarını ezberlemeniz gerekebilir; ancak bir kez alıştıktan sonra, sağladığı geliştirme hızı ve bakım kolaylığı geleneksel CSS yöntemleriyle kıyaslanamaz. Verimli ve modern bir ön uç (front-end) iş akışı arayan ekipler ve bireysel geliştiriciler için Tailwind CSS şüphesiz güçlü bir seçenektir.

Sıkça Sorulan Sorular.

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

Hayır; doğru şekilde yapılandırılıp kullanıldığında sorun olmaz. Tailwind, “ağaç sallama optimizasyonu” (tree shaking optimization) için PurgeCSS kullanır (bu özellik v2.1 ve sonraki sürümlerde JIT motoruna entegre edilmiştir). Derleme sırasında projenizin dosyalarını (HTML, JSX, Vue şablonları vb.) tarar ve yalnızca gerçekten kullanılan CSS sınıflarını nihai CSS dosyasına ekler. Bu sayede, Tailwind’in kaynak kodu birkaç MB boyutunda olsa bile, üretim ortamındaki CSS dosyası genellikle sadece 10 KB ile 100 KB arasındadır; yani oldukça küçüktür.

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

Bu gerçekten de sık karşılaşılan bir endişedir. Basit elemanlar için sınıf listesi oldukça kısa olabilir; karmaşık bileşenler için ise sınıf listesi uzun olabilir. Ancak bunu yönetmenin bazı yolları vardır: 1) Kullanımı… @apply 1) Komutlar, sık kullanılan kombinasyonları CSS bileşen sınıfları olarak çıkarır. 2) React, Vue gibi bileşen tabanlı çerçevelerde, kullanıcı arayüzü (UI) daha küçük alt bileşenlere bölünür ve her bileşen kendi stilini yönetir. 3) Editör eklentileri (örneğin Tailwind CSS IntelliSense) kullanılarak otomatik tamamlama ve sözdizimi vurgulama özellikleri sağlanır; bu da yazma ve okuma deneyimini iyileştirir. Birçok geliştirici, birden fazla dosya arasında gezinmeye kıyasla, tüm stillerin aynı yerde görülmesinin daha anlaşılır olduğunu fark etmiştir.

Tailwind CSS, hangi ön uç (front-end) çerçeveleriyle birlikte kullanılmaya uygundur?

Tailwind CSS, neredeyse tüm modern ön uç (front-end) çerçeveleriyle mükemmel bir şekilde uyum sağlar. Başlangıçta bileşen tabanlı (component-based) geliştirme için tasarlanmıştır. React, Vue, Svelte, Angular gibi çerçevelerde, Tailwind sınıflarını doğrudan bileşenlerin şablonlarında veya JSX kodlarında kullanabilirsiniz. Çerçevelerin bileşen sistemleri, Tailwind’in atomik (atomik) sınıflarının beraberinde getirebileceği “tekrarlama” sorunlarını tam olarak giderir; böylece stil ve yapıyı yeniden kullanılabilir bileşenler içinde bir arada paketleyebilirsiniz. Ayrıca, Next.js, Vite gibi araçlar için resmi entegrasyon kılavuzları da mevcuttur ve bu da yapılandırmayı daha da kolaylaştırır.

Tailwind CSS’nin varsayılan renk şemasını nasıl değiştirebilir veya üzerine yazabilirsiniz?

Proje kök dizininin altından bunu yapabilirsiniz. tailwind.config.js Dosyalar kolayca değiştirilebilir. theme.colors Bazı kısımlar için kullanabilirsiniz. extend Yeni bir renk ekleyebilirsiniz, veya doğrudan yeni bir renk tanımlayabilirsiniz. colors Bu nesne, varsayılan paleti tamamen değiştirmek için kullanılır. extend Daha güvenli bir yöntemdir; çünkü tüm varsayılan renkleri korur ve aynı zamanda kendi özel renklerinizi de ekler.

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#your-color-hex',
      }
    }
    // 或者完全覆盖：
    // colors: {
    //   primary: '#your-color-hex',
    //   secondary: '#another-color',
    // }
  }
}

Daha sonra, şunlar gibi araçları kullanabilirsiniz: .bg-primary İşte böyle bir sınıf.

Bir sonraki adım, bundan sonra ne yapmalıyım?

Eğer hızlı bir şekilde bir web sitesi oluşturmak istiyorsanız, bir sonraki adımda farklı web sitesi oluşturma platformlarının şablon yeteneklerini, genişletilebilirliğini ve sonraki bakım maliyetlerini karşılaştırmaya devam etmenizi öneririz.

Daha fazla okuma ve pratik bilgiler.

Aşağıdaki içerikler bu makalenin konusuyla ilgilidir ve daha fazla okumak için uygundur. Öncelikle mevcut sorununuza en yakın makaleden başlayın, sonra çevresel konulara doğru ilerleyin, genellikle daha iyi sonuçlar alırsınız.

Etiketler: