Tailwind CSS bundle boyutunu nasıl düşürürsünüz?
Purge yapılandırması, unused utility'ler ve production bundle'ınızı diyet'e sokmanın 5 yolu.
Tailwind kullanırken en sık duyulan endişe: 'Bundle çok büyür mü?' Cevap: hayır, doğru yapılandırma ile hayır.
Content path'ları doğru ayarlanın
Tailwind sadece content path'lerindeki dosyaları tarar. Tüm şablon ve bileşen dosyalarınızı eklediğinizden emin olun.
- content: ['./src/**/*.{ts,tsx}']
- Dynamic class isimlerinden kaçının
- Safelist'i sadece gerektiğinde kullanın
- @apply'ı ölçülü kullanın
Production'da ne olur?
Tailwind v4, JIT derleyici ile sadece kullanılan utility'leri üretir. Production bundle'ınız tipik olarak 10-20KB CSS olur.
Tailwind'i şişiren framework değil, yanlış kullanımdır. Doğru yapılandırma her şeydir.
Bu yazıya tepkin ne?
Yorumlar (2)
Deniz Arslan
2 gün önceHarika yazı, özellikle children prop'u ile server bileşeni geçirme kısmı çok aydınlatıcı oldu. Pratik kullanacağım.
Musa Yazlık
1 gün önceÇok sevindim işine yaradığına! Pratikte karşılaştığın soruları yazabilirsin.
Selin Yıldız
5 gün önceState'i aşağı çekme kuralını projeme uyguladım, bundle boyutu ciddi düştü. Teşekkürler!
