Merhaba arkadaşlar, bugün size Tailwind CSS kullanırken başıma gelen ve sonradan hayatımı kurtaran bir düzenleme hikayesinden bahsedeceğim. Proje büyüdükçe, her component'te aynı mavi tonunu (#3B82F6) yazmak, font boyutlarını hatırlamak ve dark mode renklerini elle güncellemek tam bir kabusa dönüşmüştü. İşte benim kullandığım en temiz çözüm: her şeyi tek bir `tailwind.config.js` dosyasından yönetmek.
Karşılaştığım Kaos
Bir butonun rengini değiştirmek istediğimde, o rengi kullanan tüm component'leri bulup tek tek güncellemem gerekiyordu. Aynı şey font ailesi, border radius veya box shadow için de geçerliydi. Bu, hem zaman kaybı hem de tutarsız bir arayüz demekti. "Bu işin bir merkezi yönetimi olmalı" deyip kolları sıvadım.
Renk Paletini Token'a Dönüştürmek
İlk iş, projedeki tüm renkleri bir `theme.extend.colors` objesinde toplamak oldu. Artık `bg-primary-500` yazdığımda, config'de tanımladığım tam o mavi tonu gelecek. İşte config dosyamdan bir kesit:
Gördüğünüz gibi, `primary`, `success`, `error` gibi anlamlı (semantic) isimler kullandım. Artık component'lerde `bg-[#3B82F6]` yerine bg-primary-500 yazıyorum. Renk değişecek olursa, sadece buradaki HEX kodunu değiştirmem yeterli!
Tipografi ve Diğer Token'lar
Aynı mantığı font boyutu (fontSize), font ailesi (fontFamily), boşluklar (spacing) ve köşe yuvarlaklıkları (borderRadius) için de uyguladım. Böylece tüm tasarım kararları tek bir yerden kontrol edilebilir oldu.
Artık bir başlık için `font-display text-xl text-primary-900` yazmak hem çok daha okunabilir hem de değişmesi gerektiğinde tek bir noktadan yönetilebilir.
Sonuç ve Tavsiyeler
Bu yöntemi uyguladıktan sonra:
Tasarımda tutarlılık sağlandı.
Güncelleme yapmak inanılmaz kolaylaştı.
Takım arkadaşlarımla aynı "dil" üzerinden konuşmaya başladık (örn: "Bu butona `error` rengini ver").
Dark mode geçişlerini config'deki renk skalaları sayesinde çok daha rahat yönetebildim.
Siz de Tailwind'de böyle bir merkezi yapı kullanıyor musunuz? Özellikle büyük projelerde farklı bir design token yönetim stratejiniz var mı? Yorumlarda deneyimlerinizi paylaşırsanız çok sevinirim!
Karşılaştığım KaosBir butonun rengini değiştirmek istediğimde, o rengi kullanan tüm component'leri bulup tek tek güncellemem gerekiyordu. Aynı şey font ailesi, border radius veya box shadow için de geçerliydi. Bu, hem zaman kaybı hem de tutarsız bir arayüz demekti. "Bu işin bir merkezi yönetimi olmalı" deyip kolları sıvadım.
Renk Paletini Token'a Dönüştürmekİlk iş, projedeki tüm renkleri bir `theme.extend.colors` objesinde toplamak oldu. Artık `bg-primary-500` yazdığımda, config'de tanımladığım tam o mavi tonu gelecek. İşte config dosyamdan bir kesit:
JavaScript:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// Primary Brand Colors
primary: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3B82F6', // Ana marka mavisi
600: '#2563eb',
900: '#1e3a8a',
},
// Semantic Colors
success: '#10b981',
warning: '#f59e0b',
error: '#ef4444',
// Neutral Grays
gray: {
100: '#f3f4f6',
800: '#1f2937',
900: '#111827',
}
},
},
},
}Gördüğünüz gibi, `primary`, `success`, `error` gibi anlamlı (semantic) isimler kullandım. Artık component'lerde `bg-[#3B82F6]` yerine bg-primary-500 yazıyorum. Renk değişecek olursa, sadece buradaki HEX kodunu değiştirmem yeterli!
Tipografi ve Diğer Token'larAynı mantığı font boyutu (fontSize), font ailesi (fontFamily), boşluklar (spacing) ve köşe yuvarlaklıkları (borderRadius) için de uyguladım. Böylece tüm tasarım kararları tek bir yerden kontrol edilebilir oldu.
JavaScript:
// tailwind.config.js (devamı)
module.exports = {
theme: {
extend: {
// ... colors tanımı burada
fontFamily: {
'display': ['Inter', 'system-ui', 'sans-serif'],
'body': ['Open Sans', 'Georgia', 'serif'],
},
fontSize: {
'xs': '0.75rem', // 12px
'sm': '0.875rem', // 14px
'base': '1rem', // 16px - Varsayılan body
'lg': '1.125rem', // 18px
'xl': '1.5rem', // 24px - Başlıklar
'2xl': '2rem', // 32px - Büyük başlıklar
},
borderRadius: {
'none': '0',
'sm': '0.125rem',
'DEFAULT': '0.375rem', // Varsayılan değer
'lg': '0.75rem',
'full': '9999px',
},
spacing: {
'18': '4.5rem',
'88': '22rem',
}
},
},
}Artık bir başlık için `font-display text-xl text-primary-900` yazmak hem çok daha okunabilir hem de değişmesi gerektiğinde tek bir noktadan yönetilebilir.
Sonuç ve TavsiyelerBu yöntemi uyguladıktan sonra:
Tasarımda tutarlılık sağlandı.
Güncelleme yapmak inanılmaz kolaylaştı.
Takım arkadaşlarımla aynı "dil" üzerinden konuşmaya başladık (örn: "Bu butona `error` rengini ver").
Dark mode geçişlerini config'deki renk skalaları sayesinde çok daha rahat yönetebildim.
Siz de Tailwind'de böyle bir merkezi yapı kullanıyor musunuz? Özellikle büyük projelerde farklı bir design token yönetim stratejiniz var mı? Yorumlarda deneyimlerinizi paylaşırsanız çok sevinirim!