Tailwind'e Giriş
Bootstrap'ın modasının geçtiği şu günlerde elbette hayatımıza tailwind girdi. Amaç aynı olsada tailwind'in biraz daha farklı bir yaklaşım tarzı ve kullanım çeşitliliği var. Dolayısı ile evet, aklınıza gelebilecek neredeyse her türlü tasarımı hiç css kullanmadan tamamen tailwind'in yardımcı sınıfları ile dökmeniz mümkün.
Elbette bunun yanında responsive yönetiminiz çok daha kolaylaşıyor. Aklınıza gelebilecek neredeyse her şeyi düşünmüşler :) Biz de geri kalmayalım diye bir bakış atalım istiyorum tailwind'e.
Kurulum
1 - CDN ile Kullanımı
İsterseniz CDN servisini kullanarak sadece bir ilgili css dosyasını dahil ederek tailwind kullanmaya başlayabilirsiniz.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Tabi CDN kullanınca bazı kısıtlamalarda beraberinde geliyor. Özelleştiremediğiniz için CDN sanki çok iyi bir yöntem değil gibi, ama gelin CDN'i ekleyerek ufak bir örnekle tailwind'i anlamaya çalışalım ilk olarak.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CDN Örneği</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-blue-200 p-3 text-center text-gray-700 mb-2">
Prototürk ile tailwind dersleri başlıyor!
</div>
<div class="text-center mt-6">
<a href="#" class="inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium text-sm bg-green-200 text-green-700 hover:bg-green-500 hover:text-white transition-colors">
Beğendim
</a>
<a href="#" class="inline-flex mx-2 items-center px-4 h-10 rounded-md font-medium text-sm bg-red-200 text-red-700 hover:bg-red-500 hover:text-white transition-colors">
Beğenmedim
</a>
</div>
</body>
</html>
sonucu merak edenler: https://codepen.io/tayfunerbilen/pen/dyvBwBG
Gördüğünüz gibi tailwind'in bize vermiş olduğu bir sürü sınıfı kullanarak css yazmadan görselleştirme işlemini başarıyla yaptık. hover yönetimi için bile hover: şeklinde kullanarak ne kadar kolay işlem yaptığımıza bakın a etiketlerinide.
Açıkçası ben çok sevdim, tabi yapabildikleri sadece bu kadar değil :) Ben de keşfettikçe makale olarak burada yazmaya devam edeceğim.
2- CLI ile Kullanımı
Tailwind'i hiçbir kurulum yapmadan doğrudan kullanabilirsiniz. Şu komutu çalıştırırsanız size bütün tailwind özelliklerini içeren bir css çıktısı verecektir.
npx tailwindcss -o style.css --minify
Tabi bunun boyutu aşırı büyük, kullanmadığımız bir sürü şey var :) Ama geliştirme ortamı için bu dert değil, production ortamına çıkarırken kullanılmayanların tamamını silebiliyoruz.
Şimdi index.html dosyanızı oluşturup style.css i çağırarak kullanmaya başlayabilirsiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CLI Örneği</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="bg-blue-200 p-3 text-center text-gray-700 mb-2">
Prototürk ile tailwind dersleri başlıyor!
</div>
<div class="text-center mt-6">
<a href="#" class="inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium text-sm bg-green-200 text-green-700 hover:bg-green-500 hover:text-white transition-colors">
Beğendim
</a>
<a href="#" class="inline-flex mx-2 items-center px-4 h-10 rounded-md font-medium text-sm bg-red-200 text-red-700 hover:bg-red-500 hover:text-white transition-colors">
Beğenmedim
</a>
</div>
</body>
</html>
Sonuç olarak açıp dosyanızı bakarsanız işe yaradığını göreceksiniz.
@apply direktifi
Yukarıdaki örneğimde butonların sadece renkleri değişik geri kalan her şeyi aynı. Hal böyle oluncada insan düşünmeden edemiyor, neden sürekli aynı şeyleri yazmak zorundayım diye? Aslında değilsiniz, @apply direktifi ile kendinize özel yardımcılar yazabilirsiniz.
Örneğin html kodumuzu şöyle değiştirelim.
<a href="#" class="btn bg-green-200 text-green-700 hover:bg-green-500 hover:text-white">
Beğendim
</a>
<a href="#" class="btn bg-red-200 text-red-700 hover:bg-red-500 hover:text-white">
Beğenmedim
</a>
İkisinde de ortak olanları sildik. Sadece farklılık içerenleri bıraktık.
Şimdi .btn için diğerlerini uygulamamız gerekiyor ancak bunun için ilk olarak bir tailwind.css dosyası oluşturalım. Ve içine şunları yazalım.
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind direktifi css'de yok biliyorum, zaten bunu kullanmayacağız bunu kullanarak css çıktısı oluşturacağız Şimdi yukarıdaki .btn sınıfımı bu dosyada şöyle tanımlamam gerekiyor.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply inline-flex mx-w2 items-center px-4 h-10 rounded-md font-medium transition-colors;
}
}
Eğer burada @layer direktifini kullanmak istemiyorsanız .btn tanımını @tailwind components; in hemen altında yazın. Çünkü diğer türlü tailwind'in bize verdiği sınıfları kullansak bile ezemeyeceğiz. Ayrıca en son production için çıktı alacağımızda bunlar kullanılmıyor ise kaldırılır, bunun dışında yazarsanız her türlü css'de yer alacaktır.
Sonuç olarak bunu kullanarak style.css oluşturmak için çalıştıracağımız komut:
npx tailwindcss -i tailwind.css -o style.css --minify
Visual Studio Code için Eklenti Önerileri
Tailwind yazacaksanız bir sürü şeyi ezberlemeniz gerekecek. Elbette css'i iyi biliyorsanız ve daha önce bootstrap gibi araçlar kullandıysanız buna aşina olmanız çok uzun sürmez ancak yinede her şeyi akılda tutmak çok akıl kârı değil :)
Yüklemeniz gereken tek eklenti muhtemlen şudur:
Tailwind CSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Ayrıca tarayıcıda değilde editör içinde hızlı önizleme için şu eklentiyi kesinlikle öneririm.
Preview on Web Server
https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server
Bu eklentiyi kurduktan sonra vscode settings.json içine şu ayarı ekleyin.
"previewServer.port": 3000
artık index.html e sağ tıklayıp Preview on side panel ı seçerseniz sağ tarafta önizleme alanı açılacak ve geliştirme yaparken özellikle büyük ekranda çalışıyorsanız işiniz çok kolaylaşacak. Ayrıca tabi ki kısayol tuşu olarak control + shift + v kombinasyonunuda kullanabilirsiniz. Bunu kullanırken html dosyanızı düzenliyor olduğunuzdan emin olun :)
Sonuç
Başlangıç için fena şeyler yapmadık. Açıkçası ben de dökümantasyonu okuyarak bir başlangıç yaptım, öğrendikçe bilgilerimi de taze tutmak için burada yazmaya devam edeceğim, 2. makalede görüşmek üzere :)
