Merhaba, ben Zülal Nebin. Bir yıla yakın bir süredir tio’da front end developer olarak sorumluluğunu üstlendiğim çeşitli projelerde Tailwind’i sık sık kullanıyorum. Tailwind CSS’i birçok diğer avantajının yanı sıra JIT moduyla geliştirme deneyimini iyileştirdiği için tercih ediyorum. Bu yazıda da JIT moduna odaklanarak Tailwind’i açıklayacağım.
Aynı zamanda özel bir tasarım uygulamanız durumunda gerekli olacak yüksek özelleştirme kabiliyetlerine dair kullanım örneklerinden bahsedeceğim.
Tailwind Nedir?
Tailwind yeni sayılabilecek bir CSS frameworkü. Bugün birçok front end developer tarafından yaygın olarak tercih ediliyor. Bunun sebebi özetle bugüne kadarki CSS framework’lerinde yaşanan bazı problemleri çözmüş olması ve bu nedenle daha iyi bir geliştirici deneyimi sunması.
İlk CSS pratiklerinden biri tek bir CSS dosyasının içine tüm stillerin eklenmesiydi. Bu karmaşık yöntemi @ import ile ayırmak da bir süre sonra terk edilen bir çözüm oldu çünkü network istekleri sayıca artıyordu. Bunun yerine Sass, less, stylus gibi çeşitli CSS preprocessorleri yaygınlaştı. Ardından Bootstrap, semantic ui gibi CSS frameworklerinin hazır componentleri ve utils classları kullanılır oldu, bunların yetersiz kaldığı noktalarda ise custom CSS vardı. Tüm bunların ardından CSS dünyasına giren Tailwind’in temelde yaptığı sık kullanılan değerleri utils class halinde vermesi.
Tailwind Kullanmak Ne Kazandırıyor?
Son zamanlarda dahil olduğum projelerde en çok kullandığım CSS kütüphaneleri Bootstrap ve Tailwind, bu yüzden Tailwind’i neden tercih ettiğimi Bootstrap üzerinden açıklamaya çalışacağım. Bootstrap kütüphanesini kullanarak CSS özelleştirmeleri gerçekleştirmenin bazı dezavantajları var çünkü Bootstrap gibi verili komponentler ile çalışan kütüphanelerin önceden stillendirilmiş hazır komponentleri sınırlandırıcı olabiliyor. Verili elementleri kullanarak istenen arayüzü geliştirmek çoğu proje için efektif olmuyor, süreç boyunca geliştirici sık sık kısıtlanmış hissediyor. Buna karşın Tailwind ile:
Rahatça CSS özelleştirmeleri yapabiliyorum.
Herhangi ui kiti bulunmadığı için kısıtlandığımı hissetmiyorum veya sadık kalmak zorunda olmuyorum.
Pure CSS ile teker teker class yazmama gerek kalmadığı için zaman kazanıyorum.
Tailwind CSS’te JIT (Just in Time) Modu Nedir?
Aslında JIT modu özelliğinden önce Purge CSS özelliği uzun süre Tailwind’in tercih edilmesini sağlamıştı. Purge CSS kullanılmayan CSS classlarını temizleyerek küçük ve temiz bir CSS çıktısına ulaşılmasını sağlıyordu. Tailwind 2.1. sürümüyle gelen Just In Time modu ise, tüm classlar içinden kullanılmayanların ayıklanması yerine direkt gerekli classların oluşturulduğu bir CSS framework’üne kavuşmamızı sağladı. Talebe dayalı class üretimiyle çok yüksek performans almak mümkün.
CSS özelleştirmeleri yaparken tailwind.config.js dosyasından konfigürasyon yaparız.
Fakat bu sırada karşılaşabileceğiniz bir problem var:
Config dosyasında mevcut Tailwind classlarında olmayan ama sadece bir kere kullanmamız gereken stillendirmeleri eklersek diğer stil genişletmeleriyle birlikte çok fazla kod kalabalığı olabilir ve isimlendirmede kararsız kalabiliriz. Just in time modu tam da bu problemle karşılaştığınızda kullabileceğiniz bir çözüm.
Özetle, Just in Time verili Tailwind sınırlarının dışında, ekstra bir şey yapmak istediğinizde kullandığınız bir mod. JIT sayesinde tasarım sisteminizde olmayan tanımlamaları yapabiliyorsunuz.
Tailwind CSS’te JIT (Just in Time) Modu Nasıl Kullanılır?
Mode: jit tanımlamasının yapılması JIT modunu etkinleştirmek için yeterli oluyor. JIT (Just in Time) modunu etkinleştirmek için öncelikle tailwind.config.js dosyasında mode seçeneğini ‘jit’ olarak ayarlamanız gerekiyor.
Tailwind CSS’te JIT modunun bilmeniz gereken özellikleri
- Tüm varyantlar aktif
JIT modu ile ihtiyaç anında stillendirme yapabildiğiniz için tailwind.config.js dosyasında ‘focus-visible’, ‘active’, ‘disabled’, ‘even’ gibi varyantlar için değişiklik yapmanıza gerek yok.
- Eğer bir elementte kombine edilmiş pseudo element kullanacaksanız özelleştirilmiş css yazmak yerine tüm varyantları kombine ederek sınıf yazabilirsiniz:
- Opsiyonel değişken desteği: Özelleştirilmiş değerleri tailwind.config.js’te tek tek konfigüre etmek yerine köşeli parantez notasyonu kullanarak tasarım sisteminizin dışına çıktığınızı belirtebilirsiniz. En kullanışlı JIT özelliklerinden biridir.
- Dinamik değerler: Opsiyonel değişkenleri kullanırken Tailwind’in yazılan sınıfları doğru olarak tespit etmesi için string birleştirme yerine tam string halini kullanmaya devam etmek gerekir.
- CSS sınıfları boşluk içermez, bu “calc(100px – 4rem)” ya da “1fr 700px 2fr” gibi değerleri olduğu gibi kullanamayacağınız anlamına gelir. Eğer sınıflarda opsiyonel değerler kullanmak istiyorsanız, calc fonksiyonlarının kullanılması gibi durumlarda boşlukları kaldırmanız ve “1fr 700px 2fr” gibi değerlerde boşluk yerine virgül kullanmanız gerekir.
- !important kullanımı: bir stil sınıfının başına ! ekleyerek bu özelliği kullanabilirsiniz:
! her zaman varyantlardan sonra kullanılmalıdır.
- Renk opacity kısa yoldan yazımı: Mesela “placeholder-white placeholder-opacity-20” gibi uzunca yazmak yerine “placeholder-white/20” yazabilirsiniz. istediğiniz renk sınıfının sonuna /[opacity değeri] ekleyerek kod kalabalığından kurtulabilirsiniz.
- İstediğiniz elementin istediğiniz borderını istediğiniz farklı renklerle çeşitlendirebilirsiniz.
- Pseudo-element seçiciler: ::before, ::after, ::marker gibi pseudo-elementleri sınıf içinde varyant olarak kullanabilirsiniz. not: her pseudo class varyantı için geçerlidir.
- Content özelliği desteği: Before ve after varyantından sonra content-* özelliğini kullanabiliriz.
- Sibling selector varyantı: Child elementlerin parentına verdiğimiz group-* varyantı gibi, sibling elementler için de peer-* varyantını kullanabiliriz.
- transform sınıfını etkinleştirme ihtiyacı yok: JIT kullanmadan önce 2d transform özelliklerini kullanabilmek için transform sınıfını eklememiz gerekiyordu. artık transform sınıfını kullanmadan doğrudan transform özelliklerini kullanabiliriz.
Örnek projeyi inceleyebilirsiniz 👇
