Tailwind CSS Projeye Nasıl Kurulur | Adım Adım Kurulum Rehberi

Tailwind CSS Kurulum RehberiGiriş: Neden CDN Yerine Yerel Kurulum Yapmalıyız?

Bir projeye başlarken Tailwind CSS'i <script> etiketi (CDN) ile kullanmak, hızlı bir deneme yapmak için harikadır. Ancak projeniz ciddileştiğinde, Tailwind'i projenizin bir parçası haline getiren yerel kurulumu yapmak "olmazsa olmazdır". Profesyonel bir ürün için bu geçişi yapmanın üç temel sebebi vardır:

• Hız: CDN, her sayfa açılışında internetten yeniden yüklenir. Yerel kurulum ise projenin içine gömülü olduğu için sıfır gecikme ile çalışır ve sitenizin performansını artırır.
• İnternet Bağımsızlığı: Kullanıcının interneti yavaşladığında veya kesildiğinde, CDN'den yüklenemeyen stiller sitenizin bozuk görünmesine neden olur. Yerel kurulum bu sorunu tamamen ortadan kaldırır.
• Otomatik Tamamlama: VS Code gibi modern kod editörleri, projenize yerel olarak kurulan Tailwind CSS sınıflarını tanır ve kod yazarken size akıllı öneriler sunarak geliştirme sürecini hızlandırır.

Bu rehber, projenizi amatör bir denemeden profesyonel bir yapıya taşıyacak kurulum adımlarını net bir şekilde gösterecektir.

Kurulum Adımları

Adım 1: Gerekli Paketleri İndir 📥

Bu adımın amacı, Tailwind'in çekirdek motorunu ve stil dosyalarını projeniz için hazırlayacak yardımcı paketleri bilgisayarınıza indirmektir. Projenizin ana klasöründeyken terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm install -D tailwindcss postcss autoprefixer

Bu komut; tailwindcss, postcss ve autoprefixer paketlerini projenize birer "geliştirme bağımlılığı" (-D) olarak ekler. Yani bu paketler sadece geliştirme aşamasında kullanılır ve sitenizin son kullanıcıya giden boyutunu artırmaz. PostCSS, Tailwind'in CSS'ini dönüştürmek için bir altyapı sağlarken, Autoprefixer ise -webkit- gibi tarayıcı ön eklerini otomatik ekleyerek sizi büyük bir dertten kurtarır.

Paketlerimiz indiğine göre, şimdi sıra ayar dosyalarını oluşturmakta.

Adım 2: Ayar Dosyalarını Oluştur ⚙️

Tailwind'in projenizde nasıl çalışacağını belirleyen ayar dosyalarını manuel olarak oluşturmak yerine, bu işlemi tek bir komutla otomatikleştirebiliriz. Bu komut, tailwind.config.js ve postcss.config.js adında iki kritik yapılandırma dosyasını sizin için oluşturacaktır.

Terminalde aşağıdaki komutu çalıştırın:

npx tailwindcss init -p

Önemli Not: Eğer bu komut herhangi bir hata verirse, Tailwind'in en son sürümünü kullanarak dosyaları oluşturmak için npx tailwindcss@latest init -p komutunu deneyin.

Dosyalarımız hazır. Şimdi Tailwind'e projenin hangi dosyalarını izlemesi gerektiğini söyleyelim.

Adım 3: Tailwind'e "Nereye Bakacağını" Söyle 👀

Proje klasörünüzde yeni oluşturulmuş olan tailwind.config.js dosyasını açın. Bu dosya, Tailwind'e hangi dosyaları tarayarak kullanılacak stil sınıflarını bulacağını bildirir. Bu yapılandırma sayesinde, sadece kullandığınız sınıflar nihai CSS dosyasına dahil edilir ve dosya boyutu minimumda tutulur.

Dosyanın mevcut içeriğini tamamen silin ve aşağıdaki kodu yapıştırın. Bu ayar, Tailwind'in src klasörü içindeki tüm JavaScript, TypeScript ve HTML dosyalarını taramasını sağlar. Unutmayın, projenizin tüm tasarım kimliği (renkler, fontlar, boşluklar vb.) bu theme.extend bloğu içinde merkezi olarak yönetilir. Bu, tutarlı bir tasarım sistemi kurmanın anahtarıdır.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    // Otomatik ortalama için container ayarı
    container: {
      center: true,
      padding: '1rem',
    },
    extend: {
      // Projeye özel renkler buraya
      colors: {
        primary: '#1d4ed8', 
        secondary: '#1e293b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Harika! Artık Tailwind projemizi anlıyor. Şimdi onu ana CSS dosyamıza bağlayalım.

Adım 4: Ana CSS Dosyasını Bağla 🔗

Projenizin src klasöründe yer alan ana CSS dosyasını (örneğin, src/style.css) açın. İçindeki tüm mevcut stilleri silin ve yerine sadece aşağıdaki üç "sihirli" satırı ekleyin:

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

Bu direktifler, Tailwind'in stil katmanlarını projenize enjekte eder: base ile tarayıcı tutarlılığı sağlanır, components ile önceden oluşturulmuş bileşen stilleri eklenir ve utilities ile de projenin can damarı olan binlerce yardımcı sınıf kullanıma hazır hale gelir.

Adım 5: Eski CDN Kodunu Temizle 🗑️

Bu adım kritik bir temizlik operasyonudur. Projenizin ana index.html dosyasını açın ve içinde CDN aracılığıyla Tailwind'i yükleyen <script> etiketini mutlaka silin. Aksi takdirde, hem CDN'den hem de yerel dosyadan olmak üzere iki farklı Tailwind sürümünü yükleyerek çakışmalara neden olursunuz. Bu sadece performans sorunlarına değil, aynı zamanda yerel kurulumunuz ile CDN sürümü arasındaki versiyon farklarından kaynaklanan beklenmedik stil bozulmalarına da yol açabilir.

Silmeniz gereken satır şuna benzer olacaktır:

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

Temizliği de tamamladığımıza göre, son bir kontrol yapıp her şeyin doğru bağlandığından emin olalım.

Adım 6: CSS Import Kontrolünü Yap 🔌

Projenizin ana JavaScript veya TypeScript giriş dosyasını (genellikle src/main.jsx, src/index.tsx veya src/App.jsx gibi bir dosyadır) açın. Bir önceki adımda düzenlediğiniz ana CSS dosyasının bu dosyaya import edildiğinden emin olun. Eğer bu satır eksikse, stilleriniz sayfaya uygulanmayacaktır.

Dosyanın en üst satırlarında aşağıdaki gibi bir import ifadesi görmelisiniz:

import "./style.css";

Adım 7: Sunucuyu Yeniden Başlat 🚀

Bu kadar köklü yapılandırma değişikliğinden sonra, geliştirme sunucusunun yeni ayarları tanıması için yeniden başlatılması şarttır.

1. Terminalde çalışan sunucuyu Ctrl + C tuş kombinasyonu ile durdurun.
2. Sunucuyu npm run dev komutu ile yeniden başlatın.

Tebrikler! Bu adımları tamamladıktan sonra Tailwind CSS, projenize başarıyla ve profesyonel bir şekilde kurulmuş oldu. Artık daha hızlı, daha güvenilir ve daha akıllı bir geliştirme deneyiminin keyfini çıkarabilirsiniz.