Tailwind vs Geleneksel CSS Karşılaştırması

<!-- Geleneksel CSS -->
<div class="card">Merhaba</div>
<style>
.card {
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<!-- Tailwind CSS -->
<div class="p-4 bg-white rounded-lg shadow">Merhaba</div>

✅ Öne Çıkan Özellikler / Key Features

Eski Yöntem (v3) / Old Way

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3490dc',
      },
    },
  },
}

Yeni Yöntem (v4) / New Way

/* app.css */
@import "tailwindcss";

@theme {
  --color-brand: #3490dc;
  --font-display: "Inter", sans-serif;
}

Cascade Layers

/* Tailwind 4.0 @layer kullanımı */
@layer base {
  h1 { @apply text-2xl font-bold; }
}

@layer components {
  .btn { @apply px-4 py-2 rounded; }
}

@layer utilities {
  .text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
}

Container Queries (Dahili Destek / Built-in Support)

<!-- Container query ile responsive tasarım -->
<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    <!-- Container boyutuna göre değişen layout -->
  </div>
</div>

color-mix() Desteği

<!-- Dinamik opaklık ayarı -->
<div class="bg-blue-500/50">
  <!-- %50 opaklıkta mavi arka plan -->
</div>

<!-- CSS variable ile kullanım -->
<div class="bg-[--brand-color]/75">
  <!-- Custom property ile dinamik renk -->
</div>

Yöntem 1: Vite ile Kurulum (Önerilen / Recommended)

# Yeni Vite projesi oluştur
npm create vite@latest my-project -- --template vanilla
cd my-project

# Tailwind CSS 4.0 kur
npm install tailwindcss @tailwindcss/vite

# vite.config.js düzenle

vite.config.js Yapılandırması

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

CSS Dosyasına Tailwind Ekle

/* src/style.css */
@import "tailwindcss";

/* Özelleştirmeler buraya */
@theme {
  --color-primary: #3b82f6;
}

Yöntem 2: PostCSS ile Kurulum

# Tailwind ve PostCSS kur
npm install tailwindcss @tailwindcss/postcss postcss

# postcss.config.js oluştur

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

Otomatik Yükseltme Aracı / Automatic Upgrade Tool

# Tailwind upgrade CLI kullan
npx @tailwindcss/upgrade

# Bu komut:
# - Bağımlılıkları günceller
# - Config dosyasını CSS'e dönüştürür
# - Breaking change'leri düzeltir