orhan
Moderator
- Joined
- Dec 5, 2018
- Messages
- 471
- Reaction score
- 101
- Points
- 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.
Ö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.
