Tailwind CSS Just-in-Time (JIT) Modu Nedir?

💡 Ö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? başlıklı yazımı okumanızı tavsiye ederim.

Tailwind CSS: Klasik (Purge) vs. Just-in-Time (JIT) Modu

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:

// 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:

{
  "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ı.