Tailwind v4 ile küçük ama ciddi bir tasarım sistemi kurmak

Tailwind v4, CSS-first yaklaşımıyla tasarım sistemleri kurmayı eskisinden çok daha verimli hale getirdi. Artık bir JS config dosyası açıp her rengi, her fontu tek tek tanımlamak yerine, doğrudan CSS içinde @theme bloğuyla tokenlarınızı belirliyorsunuz.

Token katmanı: @theme ile başlamak

İlk adım, projenizin tüm renk, font ve spacing değerlerini bir @theme bloğunda toplamak. Bu sayede hem Tailwind utility'leri hem de doğrudan CSS kullanımı aynı tokenlardan beslenir.

@theme {
  --color-paper: #faf9fc;
  --color-ink: #1a1a2e;
  --color-accent: #f4506c;
  --font-sans: var(--font-rubik);
}

Utility katmanı: @utility ile özel sınıflar

Tailwind v4'te @utility direktifiyle kendi utility'lerinizi tanımlayabilirsiniz. Bu, tekrar eden kombinasyonları tek bir sınıfta toplamak için ideal.

Pratik bir örnek: wave-underline

Sitede tekrar eden bir vurgu stili varsa, bunu bir utility olarak tanımlamak mantıklı. Böylece her seferinde background-image, background-size, background-position yazmak yerine tek sınıf yeterli.

• Tokenlar @theme içinde tanımlanır
• Utility'ler @utility ile oluşturulur
• Komponentler compose edilir
• Ekip büyüdükçe tutarlılık korunur

İyi bir tasarım sistemi, kısıtlamalarıyla güçlü olan sistemdir. Her şeyi serbest bırakmak değil, doğru şeyleri kolaylaştırmak önemlidir.

Sonuç: Küçük ama ölçeklenebilir

Bu yaklaşımın gücü, küçük projelerde overhead yaratmaması ve büyük projelerde tutarlılığı korumasıdır. Tokenlar, utility'ler ve birkaç akıllı varsayım — ekip büyümeden tutarlı kalan bir sistem için bu kadarı yeterli.