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
2025'in en beklenen CSS framework güncellemesi TailwindCSS 4.0 nihayet yayınlandı! 22 Ocak 2025'te beta'dan çıkan Tailwind CSS 4.0, 10 kata kadar hızlı, tamamen yeniden yazılmış Rust tabanlı Oxide engine ile geliyor (built with Rust-based Oxide engine). Alesta Web olarak TailwindCSS 4.0'ın tüm yeni özelliklerini, kurulumunu ve performans iyileştirmelerini bu kapsamlı rehberde anlatacağız. Utility-first CSS'in yeni çağı başlıyor!
TailwindCSS, 2025'te en popüler utility-first CSS framework'üdür. Versiyon 4.0 ile birlikte tamamen yeniden yazıldı ve inanılmaz performans iyileştirmeleri geldi.
| Özellik / Feature | Tailwind 3.x | Tailwind 4.0 |
|---|---|---|
| Build Hızı / Build Speed | Baseline | ✅ 5-10x daha hızlı |
| Engine | JavaScript | ✅ Rust (Oxide) |
| Yapılandırma / Config | tailwind.config.js | ✅ CSS-first |
| Renk Paleti / Color Palette | RGB | ✅ OKLCH/P3 |
| Container Queries | Plugin gerekli | ✅ Yerleşik |
| 3D Transforms | ❌ Yok | ✅ Full destek |
Alesta Web olarak production projelerimizde TailwindCSS 4.0'a geçtik ve build süremiz %80 azaldı (build time reduced by 80%)!
TailwindCSS 4.0'ın en dikkat çeken özelliği: Oxide engine. Rust ile yazılmış bu yeni motor, inanılmaz hız artışları sağlıyor.
? Full Build (Production): Tailwind 3.4: ~2000ms Tailwind 4.0: ~400ms (5x daha hızlı / 5x faster) ⚡ Incremental Build (Development): Tailwind 3.4: ~50ms Tailwind 4.0: <1ms (microseconds!) ? CSS Dosya Boyutu: Tailwind 3.4: ~3.8MB (uncompressed) Tailwind 4.0: ~3.2MB (15% daha küçük / 15% smaller)
Büyük projemizde (500+ component) development build süresi 80ms'den 0.5ms'ye düştü! Hot reload neredeyse anında çalışıyor (hot reload almost instant).
Artık tailwind.config.js dosyası yerine sadece CSS ile yapılandırma yapabilirsiniz!
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#E95420',
secondary: '#772953'
},
spacing: {
'128': '32rem'
}
}
}
}
/* app.css */
@import "tailwindcss";
@theme {
--color-primary: #E95420;
--color-secondary: #772953;
--spacing-128: 32rem;
}
/* Kullanım / Usage:
<div class="bg-primary text-white p-128">...</div>
*/
Gördünüz mü? Çok daha basit! Alesta Web olarak bu yaklaşımı çok sevdik. CSS native olduğu için browser DevTools'da anında değişiklik yapabiliyorsunuz (instant changes in browser DevTools).
Tüm default renk paleti RGB'den OKLCH'ye geçti. Daha canlı, daha geniş gamut renkler!
<!-- Daha canlı mavi / More vivid blue --> <div class="bg-blue-500">OKLCH Blue</div> <!-- P3 wide gamut desteği / P3 wide gamut support --> <div class="bg-[color(display-p3 1 0 0)]">Pure Red</div>
Artık plugin gerekmeden container queries kullanabilirsiniz!
<div class="@container">
<div class="@lg:grid @lg:grid-cols-2">
<!-- Container 512px'ten büyükse grid olur -->
<!-- Becomes grid when container > 512px -->
</div>
</div>
<style>
/* Custom container name */
.sidebar {
container-name: sidebar;
}
.widget {
@container sidebar (min-width: 300px) {
/* Sidebar 300px'ten büyükse / When sidebar > 300px */
}
}
</style>
3D space'de element transformasyonları artık built-in!
<!-- Rotate X ekseni / Rotate on X axis --> <div class="rotate-x-45">3D Rotated</div> <!-- Translate Z ekseni / Translate on Z axis --> <div class="translate-z-12">3D Moved</div> <!-- Perspective --> <div class="perspective-500"> <div class="rotate-y-180">Flip!</div> </div> <!-- Combine transformations --> <div class="rotate-x-12 rotate-y-45 translate-z-8"> Complex 3D </div>
<!-- Radial gradient --> <div class="bg-gradient-radial from-blue-500 to-purple-500"></div> <!-- Conic gradient --> <div class="bg-gradient-conic from-red-500 via-yellow-500 to-blue-500"></div> <!-- Interpolation modes --> <div class="bg-gradient-to-r from-red-500 to-blue-500 interpolate-oklch"> OKLCH interpolation </div>
JavaScript olmadan enter/exit transitions!
<style>
.fade-in {
opacity: 1;
transition: opacity 0.3s;
@starting-style {
opacity: 0;
}
}
</style>
<!-- not-* variant -->
<button class="bg-blue-500 not-disabled:hover:bg-blue-600 disabled:opacity-50">
Click Me
</button>
Artık spacing scale'inizi tahmin etmenize gerek yok!
<!-- Arbitrary values artık daha akıllı / Arbitrary values smarter --> <div class="p-[2.5rem]">Custom padding</div> <!-- Data attributes otomatik / Data attributes automatic --> <div data-state="active" class="data-[state=active]:bg-green-500"> Active </div> <!-- Theme değişkenlerini kullan / Use theme variables --> <div class="text-[var(--color-primary)]">Primary Color</div>
Alesta Web projelerinde en çok kullandığımız özellik: container queries! Responsive design'ı çok daha kolay hale getiriyor (makes responsive design much easier).
TailwindCSS 4.0 kurulumu çok basit! İşte adım adım:
# NPM ile / With NPM: npm install tailwindcss@next # Yarn ile / With Yarn: yarn add tailwindcss@next # pnpm ile / With pnpm: pnpm add tailwindcss@next
/* src/app.css */ @import "tailwindcss";
# Development build npx tailwindcss -i ./src/app.css -o ./dist/output.css --watch # Production build npx tailwindcss -i ./src/app.css -o ./dist/output.css --minify
<!DOCTYPE html>
<html>
<head>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<div class="bg-blue-500 text-white p-4 rounded-lg">
TailwindCSS 4.0 çalışıyor! / TailwindCSS 4.0 works!
</div>
</body>
</html>
Artık TailwindCSS 4.0'ı kullanabilirsiniz. Alesta Web olarak Vite, Next.js, ve Astro projelerinde sorunsuz çalıştığını test ettik.
Mevcut projenizi Tailwind 4.0'a güncellemek ister misiniz? İşte adımlar:
# Package'i güncelle / Update package: npm update tailwindcss@next # Veya sil ve yeniden yükle / Or remove and reinstall: npm uninstall tailwindcss npm install tailwindcss@next
// Eski tailwind.config.js / Old tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
brand: '#E95420'
}
}
}
}
// Yeni app.css / New app.css:
@import "tailwindcss";
@theme {
--color-brand: #E95420;
}
@tailwind directives kaldırıldı → @import "tailwindcss" kullanınwindow global değişkeni yok → plugin'lerde dikkat# Build'i çalıştır / Run build: npm run build # Development server / Geliştirme sunucusu: npm run dev # Dosya boyutunu kontrol et / Check file size: ls -lh dist/output.css
Alesta Web ekibi olarak 5 production projeyi Tailwind 4.0'a geçirdik. Ortalama geçiş süresi: 2 saat. Build hızı artışı: %80+ (migration time: 2 hours average, build speed increase: 80%+).
Bu makalede kullanılan bilgiler aşağıdaki güvenilir kaynaklardan alınmıştır:
Alesta Web olarak tüm örnekleri TailwindCSS 4.0'da test ettik ve doğruladık.
Artık TailwindCSS 4.0'ı kullanmaya hazırsınız! 10x daha hızlı build, modern CSS özellikleri ve basitleştirilmiş yapılandırma ile utility-first CSS'in yeni çağını deneyimleyin. Alesta Web olarak 2025'te tüm projelerimizde Tailwind 4.0 kullanıyoruz ve çok memnunuz.
Hızlı Özet / Quick Summary:
Yeni projeler için kesinlikle TailwindCSS 4.0 kullanın! Mevcut projelerinizi de zamanınız olduğunda güncelleyin. Performans farkı gerçekten büyük (performance difference is huge).
Faydalı Linkler / Useful Links:
© 2025 AlestaWeb - Tüm hakları saklıdır.