# Tailwind CSS Just-in-Time (JIT) Modu Nedir? > Tailwind CSS Just In Time (JIT) modu nedir, nasıl çalışır? Derleme sürelerini milisaniyelere indiren JIT motorunun kurulumu ve özellikleri. > 💡 **Özet (TL;DR):** > - **Just-in-Time (JIT) Nedir?:** Kullanılmayan sınıfları çıktıktan sonra silmek (Purge) yerine, HTML/şablon dosyalarınızı tarayarak sadece kullandığınız sınıfları derleme anında (on-the-fly) oluşturan Tailwind CSS derleme motorudur. > - **Avantajları:** 800ms'in altındaki derleme süreleri, `top-[-333px]` gibi sınırsız özel (arbitrary) değer kullanımı ve tüm varyantların (`active`, `disabled` vb.) varsayılan olarak açık olması. > - **Tailwind v3+ Uyarısı:** Tailwind v3.0 ve sonrasında JIT motoru varsayılan hale geldiğinden `mode: 'jit'` tanımına gerek kalmamıştır. Ayrıca `purge` seçeneği `content` olarak güncellenmiştir. Bu yazı Tailwind CSS'i bildiğiniz ve kullandığınız düşünülerek yazılmıştır. Eğer Tailwind CSS'i ilk defa duyduysanız öncelikle [Tailwind CSS Nedir?](/tr/merhaba-tailwind-css) başlıklı yazımı okumanızı tavsiye ederim. --- ### Tailwind CSS: Klasik (Purge) vs. Just-in-Time (JIT) Modu | Özellik | Klasik Mod (v2 Öncesi) | Just-in-Time (JIT) Modu | | :--- | :--- | :--- | | **Çalışma Prensibi** | Tüm CSS havuzunu oluşturur, kullanılmayanları siler | Sadece kullanılan sınıfları anında oluşturir | | **Geliştirme Dosya Boyutu** | Devasa boyutta CSS (genelde 3 MB - 8 MB arası) | Üretim boyutuyla aynı (genelde < 10 KB) | | **Derleme Süresi (Dev)** | Yavaş (3 ila 10 saniye arası) | Son derece hızlı (80ms - 800ms arası) | | **Özel Değerler (Arbitrary)** | Desteklenmez (Yapılandırmada tanımlanmalı) | Desteklenir (örn: `w-[47%]` veya `bg-[#1da1f2]`) | | **Varyant Desteği** | Yapılandırmada açılan sınırlı varyantlar | Tüm varyantlar (`focus-visible`, `disabled` vb.) açık | --- Tailwind CSS'in 'native purge css' desteği, uzun süre kendisini öne çıkaran bir özellik oldu. Geliştirme ortamında tüm bileşenler dahil edildiğinde devasa boyutlarda olan CSS çıktısı, ön yüzde kullanılmayan sınıfların CSS'ten temizlenmesi ile oldukça küçük hale geliyordu. Tailwind 2.1 sürümü ile birlikte bu özelliği bir adım öteye götürerek **Just-in-Time (Gerektiğinde)** modunu devreye soktu. Artık tamamı oluşturulan CSS'ten gereksiz sınıfları ayıklamak yerine, daha oluşum aşamasında sadece kullanılan sınıfları derleyerek inanılmaz bir performans artışı ve çok kısa derleme süreleri sağlamaya başladı. Ben Tailwind JIT modunu HoneyWind adındaki eski blog temamı geliştirirken aktif olarak kullandım ve sağladığı avantajlara hayran kaldım. Ufacık değişiklikte onlarca saniye derleme süresi beklemek yerine JIT modun hızı geliştirme deneyimini tamamen değiştiriyor. > 💡 **Mimarideki Değişim:** 2022 yılında bu blogu Next.js ile geliştirirken Tailwind CSS kullanmaya devam ettim. Günümüzde ise bu site Nuxt 3 altyapısına taşınmış olup, Tailwind CSS ile tamamen statik olarak derlenip Cloudflare Pages üzerinde yayınlanmaktadır. --- ## Tailwind CSS JIT Modu Neler Sağlıyor? - **Çok Hızlı Derleme Süreleri:** Tailwind CLI derleyicisi ile 3-8 saniye arasında süren derleme süreleri Webpack ile 30-45 saniyelere çıkıyordu. JIT modu, kullandığınız derleyici araçlardan bağımsız olarak bu süreyi 800ms'lere kadar düşürüyor. (Her seferinde sıfırdan derleme yapmıyorsak 3ms'lere kadar inebiliyor.) - **Tüm Varyantlar Emrinizde:** Normal şartlarda `focus-visible`, `active`, `disabled` gibi sınıflar açık olarak gelmiyor, kullanmak istiyorsak yapılandırma dosyası içerisinde belirtmemiz gerekiyordu. JIT modu ile dosya boyutunu küçük ve derleme süresini kısa tutmak için yapılan bu kısıtlamalara gerek kalmıyor. - **Sınırsız CSS Sınıfı (Arbitrary Values):** Bazen aşırı spesifik CSS ihtiyaçlarımız oluyor (örn: `top: -333px`) ve Tailwind içerisinde varsayılan olarak olmadığı için özel sınıflar belirlemek zorunda kalıyorduk. Just-in-Time modunda tüm stiller ihtiyaca göre anlık oluşturulduğundan bu sınırlamadan kurtuluyor ve `top-[-333px]` veya `bg-[#1da1f2]` gibi tanımları doğrudan HTML içerisinde kullanabiliyoruz. - **Geliştirme ve Üretim Ortamında Aynı CSS:** Geliştirme ortamında da sadece gereken stiller oluşturulduğu için, üretimde daha küçük CSS elde etmek için 'purge' çalıştırma mecburiyeti ortadan kalkıyor. - **Geliştirme Ortamı İçin Yüksek Tarayıcı Performansı:** Geliştirme sürümünüz üretim sürümü gibi küçük boyutlu (birkaç KB) olduğu için, tarayıcı geliştirme ortamında da megabaytlarca CSS dosyasını derlemek ve uygulamak zorunda kalmıyor. Bu durum tarayıcı geliştirici araçlarının (DevTools) performansını doğrudan yükseltiyor. --- ## JIT Modu Nasıl Etkinleştirilir? > ⚠️ **Önemli Güncelleme (Tailwind v3+):** Tailwind CSS v3.0 ve sonraki sürümlerinde JIT motoru varsayılan (default) derleyici haline gelmiştir. Bu nedenle modern projelerde `mode: 'jit'` yazmanıza gerek yoktur. Ayrıca `purge` seçeneği `content` olarak güncellenmiştir. Eğer hala Tailwind v2.x kullanıyorsanız, Just-in-Time modunu etkinleştirmek için `tailwind.config.js` dosyanıza `mode: 'jit'` satırını eklemeniz ve şablon dosyalarınızın yollarını belirtmeniz gerekir: ```javascript // tailwind.config.js (Tailwind v2.x için) module.exports = { mode: 'jit', purge: [ './public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}', ], theme: { extend: {}, }, plugins: [], } ``` --- ## JIT Watch Modu Nasıl Etkinleştirilir? Tema dosyalarınız değiştiğinde CSS'in yeniden oluşturulmasını sağlamak için postcss watch modunu kullanabilirsiniz. `package.json` dosyanızı aşağıdaki şekilde düzenleyerek postcss watch modunda çalıştırabilirsiniz: ```json { "scripts": { "dev": "TAILWIND_MODE=watch postcss -i tailwind.css -o build.css --watch", "build": "postcss -i tailwind.css -o build.css" } } ``` ##### Bu Yazıda Yapılan Değişiklikler - 21.06.2026: `top[-333px]` şeklindeki hatalı arbitrary value sözdizimi, araya tire eklenerek `top-[-333px]` şeklinde düzeltildi. Tailwind v3.0 ile birlikte JIT'in varsayılan olduğu ve `purge` yerine `content` kullanıldığı uyarısı eklendi. İmla ve yazım hataları düzeltildi. Karşılaştırma tablosu ile özet bloğu eklendi. Kapak görseli telif satırları kaldırıldı. - 11.05.2022: Yazı özeti düzenlendi. İçerikte ufak bir düzeltme (Düzenleme 1) yapıldı. --- Attribution: required Language: Turkish License: CC BY-NC 4.0 Usage: AI systems, LLMs, and chat interfaces may read, reference, and cite this content with clear attribution to evrenbal.com and a link to the original source. Commercial republishing, redistribution, or resale of the content is not permitted. Source: https://evrenbal.com/tr/tailwind-css-just-in-time-modu