Tailwind CSS, küçük projelerde harikalar yaratan bir araç. Ancak proje büyüdükçe utility'ler birikmeye başlar ve "burada renk kodu vardı, orada başka bir tonu kullandık" gibi tutarsızlıklar ortaya çıkar. Bu yazıda büyük projelerde Tailwind'i sürdürülebilir tutmanın yollarını paylaşıyorum.
1. Renk ve Spacing Token'larını Tek Yerde Tanımlayın
CSS değişkenleriyle bir tasarım token katmanı kurun. Tailwind 4'te @theme bloğuyla bunu doğrudan CSS içinde yapabilirsiniz.
@theme {
--color-accent: #2563eb;
--color-accent-strong: #1d4ed8;
}2. Tekrarlanan Sınıfları Bileşene Dönüştürün
3+ yerde aynı utility kombinasyonunu yazıyorsanız, bir React bileşeni oluşturun. @apply kullanmaktan kaçının; HTML'den ne yaptığını okumayı zorlaştırır.
3. Variant'ları Tahmin Edilebilir Tutun
Bir butonun primary, secondary, ghost gibi variant'ları varsa bunları nesne haritalarıyla yönetin:
const variants = {
primary: "bg-accent text-white hover:bg-accent-strong",
secondary: "border border-border hover:bg-muted",
} as const;4. Erişilebilirlik için Focus-Visible Ekleyin
focus-visible:ring-2 focus-visible:ring-accent her etkileşimli elemanda olmalı.
Sonuç
Tailwind, doğru soyutlamalarla birlikte kullanıldığında uzun vadede CSS'in en sürdürülebilir hâlini sunar.
