Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
Tailwind CSS v4'e geçiş yapmak istiyorsunuz ama nereden başlayacağınızı bilmiyor musunuz? Projenizde migration sırasında hatalarla mı karşılaşıyorsunuz? Alesta Web olarak bu rehberde Tailwind CSS v4 migration sürecini adım adım anlatıyoruz. CSS-first yaklaşım, breaking changes ve yaygın hatalar hakkında bilmeniz gereken her şey burada!
Tailwind CSS v4, utility-first CSS framework'ünün en büyük güncellemesi. Peki neden bu kadar önemli? Alesta Web ekibi olarak şunu söyleyebiliriz: Bu sadece bir versiyon güncellemesi değil, tamamen yeni bir mimari yaklaşım.
Tailwind CSS v4 ile birlikte JavaScript tabanlı konfigürasyon dosyası (tailwind.config.js) tarihe karışıyor. Artık CSS-first approach (CSS öncelikli yaklaşım) geçerli. Yani konfigürasyonunuzu doğrudan CSS dosyanızda yapıyorsunuz.
Tailwind CSS v4, Ocak 2025'te stable olarak yayınlandı. Build süreleri 100 kata kadar hızlandı (100x faster builds). Ancak migration süreci bazı projeler için zorlu olabiliyor.
Tailwind v4 upgrade işlemi şu tarayıcıları destekliyor:
Eğer eski tarayıcıları desteklemeniz gerekiyorsa (older browser support), Tailwind v3.4'te kalmanız önerilir. Alesta Web olarak özellikle kurumsal projelerde bu durumu göz önünde bulundurmanızı tavsiye ediyoruz.
Hadi birlikte Tailwind v4'ün getirdiği yeniliklere bakalım. Alesta Web ekibi olarak en çok beğendiğimiz özellikler şunlar:
Artık tailwind.config.js dosyasına ihtiyacınız yok. Her şeyi CSS'te yapıyorsunuz:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: '#E95420'
}
}
}
}/* styles.css */
@import "tailwindcss";
@theme {
--color-brand: #E95420;
}Tailwind v4, Rust tabanlı yeni bir engine kullanıyor. Sonuç? Build süreleri inanılmaz hızlandı. Büyük projelerde bu fark gerçekten hissediliyor.
Artık content array tanımlamanıza gerek yok. Tailwind v4 otomatik olarak template dosyalarınızı buluyor (automatic file detection).
CSS @layer desteği artık native. Bu sayede specificity sorunları (specificity issues) azalıyor.
Tailwind v4'ün hız artışını tam olarak hissetmek için PostCSS yerine yeni Lightning CSS engine'i kullanabilirsiniz.
Şimdi gelelim migration'ın en kritik kısmına. Alesta Web olarak binlerce projede gördüğümüz en yaygın breaking changes şunlar:
CSS değişkenlerini arbitrary values olarak kullanırken syntax değişti:
/* Eski (v3) - Old */
bg-[var(--my-color)]
/* Yeni (v4) - New */
bg-(--my-color)v2 uyumluluğu için korunan virgüller artık yok. Underscore kullanmalısınız:
/* Eski (v3) - Old */
grid-cols-[1fr,2fr,1fr]
/* Yeni (v4) - New */
grid-cols-[1fr_2fr_1fr]Bu değişiklik resmi dökümanlarda bile tam olarak belirtilmedi ve birçok geliştiriciyi şaşırttı:
/* Bu kod v4'te bozulabilir */
transition-[transform,opacity]
/* Çünkü transition-transform artık 4 property kullanıyor (1 yerine) */
/* transition-transform now uses 4 properties instead of 1 */Alesta Web deneyimlerine göre, otomatik upgrade tool her zaman doğru çalışmıyor. Özellikle kompleks projelerde manuel kontrol şart!
@import "tailwindcss" direktifi, Sass derleyicileri tarafından yanlış yorumlanabiliyor. Bu bir TailwindCSS directive'i, standart CSS/Sass kuralı değil.
Şimdi Alesta Web olarak size güvenli bir migration yolu gösterelim.
git checkout -b tailwind-v4-migrationnpx @tailwindcss/upgradeBu komut otomatik olarak:
git diffUpgrade tool genellikle eski config'i "compatibility mode"da yükler. Bu geçici bir çözüm, tam migration için manuel düzenleme gerekiyor.
/* app.css */
@import "tailwindcss";
/* Custom theme variables */
@theme {
--color-primary: #E95420;
--color-secondary: #772953;
--font-display: "Inter", sans-serif;
}
/* Custom utilities */
@utility custom-shadow {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}Her sayfayı ve komponenti tarayıcıda test edin. Özellikle şunlara dikkat edin:
Tebrikler! Tailwind CSS v4'e başarıyla geçiş yaptınız. Build sürelerinizin ne kadar hızlandığını görünce şaşıracaksınız.
Alesta Web olarak migration sırasında en çok karşılaştığımız hatalar ve çözümleri:
Error: @import "tailwindcss" is not valid SCSSÇözüm (Solution): Sass kullanıyorsanız, Tailwind'i ayrı bir CSS dosyasında import edin veya postcss-import kullanın.
Warning: No utility classes found in your source filesÇözüm (Solution): Dosya yapınızı kontrol edin. Tailwind v4 varsayılan olarak src/ ve app/ dizinlerini tarar.
/* Manuel content belirtme (eğer gerekirse) */
@source "../components/**/*.tsx";/* Eski config'deki renkler çalışmıyor */Çözüm (Solution): @theme bloğunda CSS custom properties olarak tanımlayın:
@theme {
--color-brand: #E95420;
--color-brand-dark: #C34113;
}/* Bu artık çalışmıyor */
bg-[var(--my-color)]Çözüm (Solution): Parantez syntax'ına geçin:
/* Yeni syntax */
bg-(--my-color)Angular ve Nx kullanıcıları için migration daha karmaşık olabilir. Alesta Web olarak bu projelerde ekstra dikkatli olmanızı öneriyoruz.
Bu makalede kullanılan bilgiler aşağıdaki güvenilir kaynaklardan derlenmiştir:
Alesta Web olarak tüm bilgileri test ettik ve doğruladık.
Tailwind CSS v4 migration zorlu görünebilir ama faydaları çok büyük. 100x daha hızlı build süreleri, daha temiz CSS yapısı ve modern özellikler projenizi bir üst seviyeye taşıyacak. Alesta Web olarak bu rehberin size yardımcı olduğunu umuyoruz.
Hızlı Özet / Quick Summary:
Faydalı Linkler / Useful Links:
© 2026 AlestaWeb - Tüm hakları saklıdır.