Tailwind CSS Hızlı Başlangıç

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
466
Tepkime puanı
88
Puanları
28
Herkese merhaba, bu yazımda sizlere TailwindCSS kullanarak nasıl hızlı bir proje çıkarabileceğinizden bahsetmek istiyorum.
Öncelikle Teknolojileri tanıyarak başlayalım.

https://tailwindcss.com/

Tailwind CSS Adam Wathan tarafından geliştirilen bir CSS kütüphanesi. Hazır class’lar kullanarak elementlerinize CSS vermenize imkan sunuyor. Bootstrap gibi içerisinde hazır komponentler bulundurmaması ve sizin hayal gücünüz ve tasarım yeteneğinize göre daha özelleştirilebilir olması kod yazarken büyük esneklik sağlıyor.
Tabii bu farklılıklar beraberinde birçok eleştiride getiriyor. Hazır komponentleri olmadığı için çok fazla class isimlendirilmesi yaparak inline css yazmaktan pek farkı kalmadığını düşünenler var.

Ayrıca class isimlendirmelerinin semantik (anlamsal) olmaması, atomik düzeye çok yakın olması sebebi ile anlamanın zorlaştığı gibi eleştiriler alıyor. Bu konu hakkında aşağıda ki yazıyı okumanızı tavsiye ederim.

15 farklı kategoride hazırlanmış bu kod blokları responsive desteği, dark/light mode desteği ve farklı renk temaları ile çok büyük bir kolaylık sağlıyor. Bu kod blokları hızlı bir şekilde kopyalayarak kullanmaya başlayabilir ve kendinize göre özelleştirebilirsiniz. React projeleriniz için bu hazır kod bloklarını jsx’e dönüştürerek rahatça kullanabilirsiniz.

Projemize başlayalım.
Yakın zamanda bir yakınım için bir Smf web sitesi hazırladım ve bunun için çok fazla vaktim olmamasına rağmen bahsettiğim kütüphaneleri kullanarak hızlı bir proje yapabildim. Bu projeyi yaparken nasıl bir yol izlediğimi ve TailwindCSS’in sevdiğim özelliklerinden ve Tailblocks projesinden nasıl faydalandığımdan bahsetmek istiyorum. Bahsettiğim projenin linki aşağıdadır.

Demo

Bu konu altında kod yapısı detaylarını sunmaya devam edeceğim umarım yararlı olur.
 
Sure, here's a quick start guide for using Tailwind CSS:
  1. Installation
  2. Configuration
  3. Integration
  4. Usage
  5. Customization
  6. Optimization
  7. Learn More
That's it! You're now ready to start using Tailwind CSS in your projects. Happy styling!
 
Moderatör tarafında düzenlendi:

Geri
Üst Alt