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

什么是 Tailwind CSS

Tailwind CSS, işlevselliği öncelikli bir CSS çerçevesidir ve geliştiricilerin özelleştirilmiş kullanıcı arayüzleri hızlı bir şekilde oluşturmasına yardımcı olmak için birçok birleştirilebilir pratik sınıf (Utility Class) sunar. Bootstrap gibi önceden hazırlanmış bileşenler sunan çerçevelerden farklı olarak, Tailwind CSS herhangi bir tam özellikli bileşen sunmaz; bunun yerine, HTML içinde doğrudan stil yazmanıza olanak tanıyan, ince ayrıntılı ve atomize edilmiş CSS sınıfları sağlar.

Temel ilkesi “pratikliğin önceliği”dir. Bu, CSS ve HTML dosyaları arasında sürekli gidip gelmenize veya bileşenler için isimler bulmak için kafa yormanıza gerek kalmadığı anlamına gelir. .card__header--activeHerhangi bir tasarımı gerçekleştirmek için yalnızca bir dizi tanımlayıcı araç sınıfını bir araya getirmeniz yeterlidir. Örneğin, köşeleri yuvarlak, iç boşluğu ve gölgesi olan bir kart oluşturmak istiyorsanız, sadece ilgili kodları yazmanız gerekir. class="rounded-lg p-6 shadow-md"Bu yöntem, geliştirme verimliliğini büyük ölçüde artırmış ve stil tutarlılığını korumuştur.

Çevre Kurulumu ve Temel Ayarlar

Tailwind CSS’i kullanmaya başlamanın birçok yolu vardır; en yaygın yöntem, komut satırı aracını projenin derleme süreciyle entegre etmektir.

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

Çekirdek paketleri npm aracılığıyla yükleyin.

Öncelikle, Tailwind CSS ve bağımlılıklarını npm veya yarn aracılığıyla yüklemeniz gerekiyor. Projenizin kök dizininde aşağıdaki komutları çalıştırın:

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 postcss autoprefixer
npx tailwindcss init

Bu işlem, Tailwind CSS’yi, CSS dosyalarını işlemek için kullanılan PostCSS’yi ve tarayıcı öneklerini otomatik olarak ekleyen Autoprefixer’i yükleyecektir. Aynı zamanda…npx tailwindcss init Komut, varsayılan bir yapılandırma dosyası oluşturacaktır. tailwind.config.js。

Yapılandırma içeriği yolunu ve oluşturulan CSS dosyasını belirleme

Bundan sonra, yapılandırmayı gerçekleştirmeniz gerekiyor. tailwind.config.js Bu dosya, Tailwind’in hangi dosyaları tarayarak ilgili stilleri oluşturması gerektiğini belirtir. content Dizinin içine şablon dosyanızın yolunu ekleyin.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Daha sonra, bir ana CSS dosyası oluşturun (örneğin: src/input.css) ve Tailwind’in komutlarını ekleyin.

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

Son olarak, komut satırından derleme işlemini çalıştırarak girdiğiniz CSS dosyasını nihai olarak kullanılabilir bir stil dosyasına dönüştürün.

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

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Şimdi, oluşturulan içeriği HTML dosyanıza ekleyebilirsiniz. ./dist/output.css Dosyayı indirdikten sonra Tailwind CSS’nin kullanışlı sınıflarını kullanmaya başlayabilirsiniz.

Çekirdek Kullanışlı Sınıflar ve responsive (uyumlu) Tasarım

Tailwind CSS’nin pratik sınıfları neredeyse tüm CSS özelliklerini kapsar ve katı bir isimlendirme sistemi ile tasarım token’larına uyar.

Yaygın Kullanılan Araçlar Kategorisi Genel Bakışı

Araç sınıfının adlandırılması genellikle doğrudan CSS özelliklerine karşılık gelir ve kısaltmalar kullanılır. Örneğin:
* 间距：p-4 padding: 1rem;, m-2 (kenar: 0.5rem), space-x-4 (Alt öğeler arasındaki yatay aralık).
*Düzenleme:*text-lg (Yazı Boyutu), font-bold (Font Kalınlığı), text-center (Yazının hizalanması.)
* 颜色：bg-blue-500 (Arka plan rengi), text-gray-800 (Metin rengi), border-red-300 (Çerçeve rengi).
* 布局：flex, items-center (align-items: center);, justify-between (justify-content: space-between).
* 尺寸：w-64 (genişlik: 16rem), h-full (Yükseklik: 100%).
* 效果：rounded (Yuvarlak köşeler), shadow (Gölge), opacity-50 (Şeffaflık).

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.

Responsive tasarımı gerçekleştirmek

Tailwind, mobil cihazlara öncelik veren bir kesme noktası (breakpoint) sistemine sahiptir. Varsayılan pratik sınıflar mobil cihazlar için tasarlanmıştır; daha büyük ekranlarda stilleri uygulamak için ilgili duyarlı (responsive) öneklerin eklenmesi gerekmektedir.
Onun kesme noktası önekleri şunları içerir:sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px).

Örneğin, aşağıdaki kod, orta boyutlu ekranlarda yan yana sıralanan, varsayılan bir yığın (stack) düzeni oluşturur:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">Sol taraftaki içerik.</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">Sağ taraftaki içerik.</div>
</div>

Bu önekleri birleştirerek, tüm ekran boyutlarına uyum sağlayan karmaşık ve duyarlı (responsive) arayüzler oluşturabilirsiniz.

Tavsiye edilen okuma Tailwind CSS kapsamlı rehberi: Temellerden ileri düzeye, modern web siteleri oluşturma.。

Pratik Uygulama: Bir navigasyon çubuğu bileşeni oluşturma

Öğrendiğimiz bilgileri, yaygın olarak kullanılan bir responsive (uyumlu) navigasyon çubuğu oluşturarak pekiştirelim. Bu navigasyon çubuğu, büyük ekranlarda yatay olarak görüntülenirken, küçük ekranlarda hamburger menüsü şeklinde katlanır.

Temel yapıyı ve stilizi oluşturun.

Öncelikle, navigasyon çubuğunun HTML yapısını oluşturuyor ve temel stillerini uyguluyoruz.

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.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">Markam</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Anasayfa.</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Hakkımızda</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Hizmet</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">İletişim kurun</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">Ana menüyü açın.</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Bu noktada, masaüstü navigasyonu tamamlanmıştır. Şimdi kullanacağız… hidden md:block Masaüstü navigasyon bağlantılarının yalnızca orta ve daha büyük ekranlarda görünmesini sağlayın.

Etkileşimli özellikler ve mobil menü ekleyin.

Mobil cihazlarda bir butona tıklandığında menünün görünmesini sağlamak için biraz JavaScript’e ihtiyacımız var. Burada, menünün görünümünü kontrol eden bir sınıfı değiştirmek için basit, yerel JavaScript kullanılıyor.
Öncelikle, mobil menü düğmelerine ve menü içeriğine ID’ler ekleyin ve menü düğmelerini bir fonksiyonu tetikleyecek şekilde değiştirin.

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Anasayfa.</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Hakkımızda</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Hizmet</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">İletişim kurun</a>
  </div>
</div>

Daha sonra, sayfanın en alt kısmına betiği ekleyin.

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

Böylece, tam özellikli ve duyarlı (responsive) bir navigasyon çubuğu oluşturulmuş oldu. Farklı pratik sınıfları (classes) birleştirerek, tek bir satır bile özelleştirilmiş CSS kodu yazmadan bu bileşiği gerçekleştirdik.

Özetle.

Tailwind CSS, “practicality first” (pratiklik öncelikli) ilkesiyle geliştiricilerin stil yazma şeklini tamamen değiştirdi. Stil kararlarını CSS dosyalarından HTML şablonlarına taşıyarak, ince ayrıntılı araç sınıflarını birleştirerek çok yüksek bir geliştirme verimliliği ve tasarım tutarlılığı sağladı. Ortam ayarlarından temel araç sınıflarının kullanımına, duyarlı (reaktif) tasarım özelliklerinden pratik bileşenlerin oluşturulmasına kadar, Tailwind modern arayüz geliştirme süreçleri için kapsamlı ve etkili bir çözüm sunar.

Başlangıçta birçok sınıf adını ezberlemeniz gerekebilse de, sezgisel adlandırma kuralları ve kapsamlı dokümantasyon sayesinde hızlı bir şekilde kullanmaya başlayabilirsiniz. Geliştirme hızını, tasarım özgürlüğünü ve nihai paket boyutlarını kontrol etmeyi hedefleyen ekipler ve projeler için Tailwind CSS şüphesiz güçlü ve zarif bir çözümdür.

Sıkça Sorulan Sorular.

Tailwind CSS’nin stil dosyaları çok büyük olabilir mi?

Hayır. Tailwind CSS, üretim ortamında PurgeCSS (şu an Content Scanning olarak adlandırılıyor) teknolojisini kullanır. Bu teknoloji, projenizin dosyalarını analiz eder ve yalnızca gerçekten kullandığınız araç sınıflarını nihai CSS dosyasına dahil eder. Bu sayede oluşturulan CSS dosyası oldukça sade kalır; genellikle sadece birkaç KB ila onlarca KB boyutundadır.

Bootstrap ile karşılaştırıldığında, Tailwind CSS’nin başlıca avantajları nelerdir?

Tailwind CSS, daha yüksek özelleştirme özgürlüğü sunar. Bootstrap, belirli bir görünüme sahip önceden hazırlanmış bileşenler sunar ve özelleştirmek için çok miktarda CSS kodunun değiştirilmesi gerekmektedir. Öte yandan Tailwind, temel stil “materyalleri” sağlar; bu materyalleri kullanarak taslaklara tam olarak uygun, benzersiz bileşenler oluşturabilirsiniz. Böylece framework’un varsayılan stilleriyle uğraşmanıza gerek kalmaz ve ayrıca gereksiz, ağır CSS kodlarının oluşmasını da önlersiniz.

Ekip projelerinde, Tailwind CSS kodunun tutarlılığını nasıl sağlayabiliriz?

Tailwind CSS’nin yapılandırma dosyaları ile IDE eklentileri bir arada kullanılabilir. tailwind.config.js Projenin renkleri, aralıkları, yazı tipleri gibi tasarım özellikleri merkezi bir şekilde tanımlanmıştır. Ekip üyeleri, resmi VS Code veya IntelliJ IDE eklentilerini kullanabilirler; bu eklentiler otomatik tamamlama, sözdizimi vurgulama ve üzerine gelindiğinde önizleme özellikleri sunar. Bu özellikler, sınıf adlarının yazım hatalarını azaltmaya ve geliştirme verimliliğini artırmaya yardımcı olur.

Tailwind CSS’te karmaşık hover (üzerine gelindiğinde uygulanan efektler) veya focus (fokuslandığında uygulanan efektler) durumlarını nasıl ele alabilirim?

Tailwind CSS, durum değişiklikleri (state variations) için zengin önekler sunar. Örneğin: hover:, focus:, active:, disabled: Vb. Bunları herhangi bir araç sınıfının (tool class) önüne kolayca ekleyebilirsiniz. Örneğin,hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 Bir butona, üzerine gelindiğinde (hover) uygulanacak arka plan rengi ve odaklandığında (focus) görünecek halka şeklindeki kontur tanımlanabilir.