Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Günlük Utility Aileleri 2: Typography, Renk, Border, Shadow, Effect, Transform ve Form Utility'leri, typography ve forms Plugin'leri
Tailwind v4'te border ve ring varsayılan olarak currentColor kullanır, ring 1px'tir, scale/rotate/translate bağımsız transform property'lerine yazar ve @tailwindcss/forms eklendiğinde accent-* artık checkbox'ı boyamaz. Bookstore'un kitap kartında hover gölgesi ve kapak scale'i, stokta yok durumunda grayscale, checkout form'unda native kontrollerle forms plugin'ini ve CMS gövdesinde prose class'ını Playwright ile ölçüyoruz.
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.
Tailwind'de Ölçek, Bakım ve Sürümler: Component Pattern'leri, Class Sıralama, tailwind-merge ve v3'ten v4'e Migration
Çakışan iki utility'den class attribute'unda sonra yazılan değil, CSS'te sonra gelen kazanır; bu yüzden component'ler variant'ları tam adlı bir class map'le vermeli ve dışarıdan gelen class'ları tailwind-merge ile birleştirmelidir. bookstore-web'in butonunda bunu kuruyor, tailwind-merge'ün özel token tuzağını, Prettier ile sıralamayı, npx @tailwindcss/upgrade'in v3 sayfasında neyi çevirip neyi kaçırdığını Playwright ile ölçüyor ve v4.0–v4.3 sürüm haritasını çıkarıyoruz.
Angular ile Tailwind: ng add tailwindcss, Component Style'larında @reference, Dinamik Class'lar ve Headless Component'ler
Angular'da Tailwind global styles.css'te çalışır; component CSS'leri ayrı işlendiği için @apply orada @reference ister ve her component'e yedek değerler ile @property blokları taşır. bookstore-web'de ng new --style tailwind ve ng add'in ne yaptığını, 40 component'le @reference'ın bundle ve build bedelini, SCSS'te Tailwind syntax'ının neden kırıldığını, signal'larla tam adlı dinamik class'ları ve Angular Aria Listbox'ı aria-selected ile stillemeyi gösteriyoruz.
Variant'lar, Özel Utility'ler ve Modern CSS: group/peer, data-*/aria-*, @container, starting:, @utility ve @variant
Tailwind'de her variant bir selector ya da at-rule ekler; group-hover iç içe group'larda dıştaki hover'a da tepki verir, bu yüzden group/card gibi isimli group gerekir. Bookstore'un filtre ve kart örneklerinde peer, has-*, not-*, in-*, aria-expanded ve data-[state] ile headless stil, @container ve v4.3'ün @container-size'ı, starting: ile popover animasyonu, logical ve scrollbar utility'leri, @utility (--default), @variant ve @custom-variant'ı Playwright ile ölçüyoruz.
Theme ve Design Token'lar: @theme Namespace'leri, Özel Renk/Font/Breakpoint ve Dark Mode
@theme bloğundaki her değişken hem bir utility hem de :root'ta bir CSS değişkeni üretir; değişkenin namespace'i hangi utility'nin doğacağını belirler. Bookstore.Web'de marka token'larını tanımlıyor, varsayılan temayı genişletmek ile --color-*: initial ile sıfırlamayı karşılaştırıyor, @theme inline'ın kurum bazlı renkte neden gerektiğini ve @theme static'i ölçüyor, semantic değişkenler ve head script'iyle FOUC'suz dark mode kuruyor, DTCG token'larından Style Dictionary ile @theme üretiyoruz.
Tailwind v4 Kurulumu ve CSS-first Configuration: @import "tailwindcss", @source ve Oxide Engine
Tailwind v4'te configuration CSS'te durur: @import "tailwindcss" theme, Preflight ve utility'leri üç layer'a koyar, Oxide engine kaynakları düz metin olarak tarar ve yalnız tam adını gördüğü class'ları üretir. Bookstore.Web'de CLI ile input.css → site.css zincirini --watch ve --minify ile kuruyor, BeforeTargets="Build" yüzünden temiz publish'te site.css'in neden 404 döndüğünü, .gitignore'un taramaya etkisini, @source not/inline'ı ve --cat-color ile dinamik renkleri gösteriyoruz.
Utility-first Yaklaşım: Tailwind Neyi Çözer, Bedeli Nedir ve Ne Zaman Kullanılmamalı?
Utility-first, stili component'in içinde token'a bağlı küçük class'larla yazar; CSS boyutu component sayısıyla değil farklı class sayısıyla büyür, bedeli uzun class listeleri ve öğrenme eğrisidir. Bookstore'un üç component'inde iki modelin CSS ve HTML maliyetini ölçüyor, tekrarı Razor partial ile çözüyor, @apply'ın neden son çare olduğunu, CMS içeriğinde Preflight'ın etkisini ve layer'sız eski CSS'in utility'leri neden ezdiğini gösteriyoruz.
Design System Nedir? Design Token'lar (DTCG 2025.10), Component Library ve Dokümantasyon
Design system; token'lar, component'ler, kullanım kuralları ve yönetişimden oluşur, token'lar da primitive, semantic ve component katmanlarına ayrılır. Bookstore'un elle yazılmış tokens.css'ini DTCG 2025.10 JSON dosyalarına ve light/dark ile reduced motion için bir resolver'a taşıyor, Terrazzo ile CSS ve Tailwind çıktısı üretiyor ve 101 değişkenin 100'ünün Chromium'da birebir aynı çözüldüğünü ölçüyoruz.