Tailwind CSS kullanmaya başlamanın projenizin ihtiyacına göre farklı yolları vardır. Bu derste hem öğrenme aşaması için en hızlı yöntemi (CDN) hem de gerçek dünya projeleri için en doğru yöntemi (CLI) inceleyeceğiz.
1. Yöntem: CDN (Play CDN) ile Hızlı Başlangıç
Herhangi bir kurulum yapmadan, sadece deneme yapmak veya Tailwind'i öğrenmek istiyorsanız bu yöntemi kullanın. HTML dosyanızın <head> etiketleri arasına şu script kodunu eklemeniz yeterlidir.
Not: Bu yöntem canlı (production) siteler için önerilmez çünkü dosya boyutu optimizasyonu yapmaz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CDN Örneği</title>
</head>
<body>
<h1 class="text-3xl font-bold text-blue-600 underline">
Merhaba Tailwind!
</h1>
</body>
</html>
2. Yöntem: Tailwind CLI ile Profesyonel Kurulum (Önerilen - v4.0)
Gerçek bir proje geliştirirken kullanmanız gereken yöntem budur. v4.0 ile birlikte artık JavaScript ayar dosyalarıyla uğraşmıyoruz, her şeyi doğrudan CSS içinde yönetiyoruz.
Bilgisayarınızda Node.js kurulu olmalıdır.
Adım 1: Proje Oluşturma ve Paketleri Yükleme: Terminalinizi açın, proje klasörünüze gidin ve v4.0 için gerekli paketleri yükleyin:
npm install tailwindcss @tailwindcss/cli
(Dikkat: Artık init komutuyla config dosyası oluşturmanıza gerek yok!)
Adım 2: CSS Dosyasını Oluşturma: Projenizin içinde (örneğin src klasöründe) ana CSS dosyanızı oluşturun (örn: input.css) ve içine sadece şu satırı ekleyin:
Dosya: src/input.css
@import "tailwindcss";
** İşte v4.0 devrimi burada! Eskiden yazdığımız @tailwind base, @tailwind components gibi 3 satırlık kodun yerini, modern CSS import özelliği aldı.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
Adım 3: Derleme (Build) İşlemi: CSS dosyanızı tarayıp HTML'de kullandığınız sınıfları derlemek için terminalde şu komutu çalıştırın:
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch
- -i: Giriş (Input) dosyası (Sizin oluşturduğunuz).
- -o: Çıktı (Output) dosyası (HTML'e bağlayacağınız dosya).
- --watch: Siz her kaydettiğinizde otomatik derleme yapar.
Adım 4: HTML'e Bağlama: Oluşturulan çıktı dosyasını HTML'inize ekleyin:
<link href="./dist/output.css" rel="stylesheet">
Sıkça Sorulan Soru: "tailwind.config.js dosyası nereye gitti?"
Tailwind v4.0 ile birlikte yapılandırma dosyası opsiyonel hale geldi.
- Eskiden renkleri veya fontları config.js dosyasında tanımlardık.
- Artık bunları doğrudan CSS dosyanızın içinde @theme bloğu ile tanımlayabiliyorsunuz. Bu sayede projeniz çok daha sade ve yönetilebilir oluyor.
Full Stack Geliştirme Önerisi
Tailwind CSS ile harika arayüzler tasarladıktan sonra, bu arayüzleri dinamik hale getirmek ve veri tabanı işlemleri yapmak için güçlü bir Backend'e ihtiyacınız olacak.
** Eğer tasarımlarınızı Python ve Django gücüyle birleştirip profesyonel RESTful API'lar geliştirmek istiyorsanız, Udemy üzerindeki kapsamlı kursumuza göz atabilirsiniz:
👉 Python Django ile Restfull API Geliştirme Kursu
Bir sonraki derste, kod yazma hızınızı ikiye katlayacak editör ayarlarını yapacağız.