Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Günlük Utility Aileleri 1: Layout, Flex, Grid, Spacing, Sizing ve Position Utility'leri
Tailwind'in layout utility'leri CSS'e bire bir karşılık gelir ve sayısal değerler tek bir --spacing değişkeninden türer; zor kısım hangi CSS'i seçeceğini bilmek. Bookstore'un katalog grid'ini, kitap kartını ve iki kolonlu sepet sayfasını hem utility'lerle hem düz CSS ile kuruyor, iki sayfanın kutularını üç genişlikte Playwright ile karşılaştırıyor (fark 0px), space-x'in wrap olan satırlardaki hatasını, eksik min-w-0'ı ve auto-fill ile auto-fit farkını ölçüyoruz.
Responsive Mixin'ler ve Utility Class Üretmek: Breakpoint Map'i, @content(args), Container Query Mixin'i ve @each/@for ile Utility'ler
Breakpoint'leri tek bir map'ten okuyan up, down, between ve only mixin'lerini range syntax'la yaz; max-width ile min-width'in tam sınırda çakışması böylece biter ve aynı mixin'ler $container ile container query üretir. Bookstore'a @content(args) ile md: önekli utility'ler üreten bir generator ve kart genişliğine bakan bir buton ekliyor, her şeyi responsive üretmenin kural sayısını 3,6 katına çıkardığını ölçüyoruz.