Merhaba arkadaşlar, bugün başımı çok ağrıtan bir sorunu ve nasıl temiz bir çözüm bulduğumu anlatacağım. Projelerimde Tailwind CSS kullanmayı seviyorum ama bazen tasarım sistemindeki özel bileşenler için sürekli aynı utility class kombinasyonlarını yazmaktan bıkmıştım. Her butonda `px-4 py-2 rounded-lg bg-primary text-white font-semibold` yazmak... Bu hem tekrar ediyordu hem de bir gün renk değişirse hepsini bulup değiştirmek kabus olacaktı. İşte tam burada Tailwind'in `@layer` directive'ini keşfettim ve CSS bundle'ımın şişmesini de engelledim.
Sorun: Tekrar Eden Class'lar ve Şişen CSS
Tailwind, kullanmadığınız class'ları saf dışı bırakmak için PurgeCSS (şimdiki adıyla content) kullanıyor. Ama ben kendi yazdığım `.btn-primary` gibi özel class'ları da `@apply` ile oluşturduğumda, bu class'lar ana CSS dosyama ekleniyor ve PurgeCSS onları "kullanılmıyor" diye silemiyordu. Çünkü onlar template'lerimde değil, CSS dosyamın içindeydi. Sonuç? Gereksiz yere büyüyen bir CSS dosyası.
Çözüm: @layer Directive'i ile Entegrasyon
Tailwind'in `@layer` directive'i, özel stil kodlarınızı onun `base`, `components` ve `utilities` katmanlarına enjekte etmenizi sağlıyor. En güzeli, bu katmanlara eklediğiniz her şey, Tailwind'in build sürecinin bir parçası oluyor ve PurgeCSS tarafından doğru bir şekilde taranıp, kullanılmayanlar atılabiliyor.
İşte benim ana CSS dosyama (genelde `app.css` veya `tailwind.css`) eklediğim kod:
Gördüğünüz gibi, `@layer components` içine kendi bileşen class'larımı tanımladım. `@apply` kullanarak Tailwind'in utility'lerini bu class'lara dahil ettim. `text-primary-600` gibi kendi tema renklerimi de rahatça kullanabiliyorum (tabii `tailwind.config.js`'de tanımlıysa).
Utilities Katmanına Özel Utility Eklemek
Bazen çok spesifik, tek satırlık utility'ler de yazmak isteyebilirsiniz. Mesela metni gradient yapan bir utility. Onu da `utilities` katmanına ekleyebilirsiniz.
Bu şekilde eklediğim `.text-gradient-primary` class'ı, tıpkı `text-center` gibi, her yerde `class="text-gradient-primary"` diyerek kullanılabilir hale geliyor ve kullanılmadığında build'den çıkarılıyor.
Elde Ettiğim Avantajlar ve Sonuç
Bu yönteme geçtikten sonra:
1. CSS dosya boyutum ciddi oranda küçüldü. Çünkü artık tüm özel class'larım PurgeCSS'in radarında.
2. Tutarlılık sağlandı. Tüm ekip, `btn-primary` class'ını kullanınca aynı görünen butonlar elde etti.
3. Değişiklik yapmak inanılmaz kolaylaştı. Tema rengini değiştirmek mi istiyorum? Sadece `tailwind.config.js`'deki renk değerini ve yukarıdaki CSS'deki `@apply` edilen rengi güncelliyorum. Her yerde otomatik olarak değişiyor.
Siz de Tailwind'de bu tarz özel bileşenler oluşturuyor musunuz? `@layer` dışında farklı bir yöntem (meseya plugin yazmak) kullanan var mı? Ya da Vue/React'te CSS-in-JS ile bu işi çözen? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Sorun: Tekrar Eden Class'lar ve Şişen CSSTailwind, kullanmadığınız class'ları saf dışı bırakmak için PurgeCSS (şimdiki adıyla content) kullanıyor. Ama ben kendi yazdığım `.btn-primary` gibi özel class'ları da `@apply` ile oluşturduğumda, bu class'lar ana CSS dosyama ekleniyor ve PurgeCSS onları "kullanılmıyor" diye silemiyordu. Çünkü onlar template'lerimde değil, CSS dosyamın içindeydi. Sonuç? Gereksiz yere büyüyen bir CSS dosyası.
Çözüm: @layer Directive'i ile EntegrasyonTailwind'in `@layer` directive'i, özel stil kodlarınızı onun `base`, `components` ve `utilities` katmanlarına enjekte etmenizi sağlıyor. En güzeli, bu katmanlara eklediğiniz her şey, Tailwind'in build sürecinin bir parçası oluyor ve PurgeCSS tarafından doğru bir şekilde taranıp, kullanılmayanlar atılabiliyor.
İşte benim ana CSS dosyama (genelde `app.css` veya `tailwind.css`) eklediğim kod:
CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply px-4 py-2 rounded-lg font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
@apply bg-[COLOR=#E74C3C]text-primary-600[/COLOR] hover:bg-primary-700 text-white focus:ring-primary-500;
}
.card {
@apply bg-white rounded-xl shadow-md p-6 border border-gray-200;
}
}Gördüğünüz gibi, `@layer components` içine kendi bileşen class'larımı tanımladım. `@apply` kullanarak Tailwind'in utility'lerini bu class'lara dahil ettim. `text-primary-600` gibi kendi tema renklerimi de rahatça kullanabiliyorum (tabii `tailwind.config.js`'de tanımlıysa).
Utilities Katmanına Özel Utility EklemekBazen çok spesifik, tek satırlık utility'ler de yazmak isteyebilirsiniz. Mesela metni gradient yapan bir utility. Onu da `utilities` katmanına ekleyebilirsiniz.
CSS:
@layer utilities {
.text-gradient-primary {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, var(--color-primary-500), var(--color-primary-700));
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
}Bu şekilde eklediğim `.text-gradient-primary` class'ı, tıpkı `text-center` gibi, her yerde `class="text-gradient-primary"` diyerek kullanılabilir hale geliyor ve kullanılmadığında build'den çıkarılıyor.
Elde Ettiğim Avantajlar ve SonuçBu yönteme geçtikten sonra:
1. CSS dosya boyutum ciddi oranda küçüldü. Çünkü artık tüm özel class'larım PurgeCSS'in radarında.
2. Tutarlılık sağlandı. Tüm ekip, `btn-primary` class'ını kullanınca aynı görünen butonlar elde etti.
3. Değişiklik yapmak inanılmaz kolaylaştı. Tema rengini değiştirmek mi istiyorum? Sadece `tailwind.config.js`'deki renk değerini ve yukarıdaki CSS'deki `@apply` edilen rengi güncelliyorum. Her yerde otomatik olarak değişiyor.
Siz de Tailwind'de bu tarz özel bileşenler oluşturuyor musunuz? `@layer` dışında farklı bir yöntem (meseya plugin yazmak) kullanan var mı? Ya da Vue/React'te CSS-in-JS ile bu işi çözen? Yorumlarda deneyimlerinizi paylaşın, tartışalım!