Tailwind CSS Just In Time Modu

Başlık Fotoğrafı: Ferenc Almasi on Unsplash

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 öncellikle TailwindCSS nedir? başlıklı yazımı okumanızı tavsiye derim.

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 çıkartılması 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’den gereksiz sınıfları çıkartmak yerine, daha oluşum aşamasında sadece gerekli sınıfları oluşturarak inanılmaz bir performans artışı ve çok kısa derleme süreleri sağlamaya başladı.

Ben Tailwind JIT modunu blogumdaki mevcut temam(1) HoneyWind’i geliştirirken aktif olarak kullandım ve sağladığı avantajlara hayran kaldım. Bundan sonra JIT mod olmadan Tailwind kullanabileceğimi sanmıyorum. (Ufacık değişiklikte onlarca saniye derleme süresi beklemek dayanılmaz)

Düzenleme 1: 2022 Mayıs itıbarı ile blogu Next.JS ile geliştirirken Tailwind CSS ile devam ettim.

Tailwind CSS Just In Time 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ığımı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. JUSt modu ile dosya boyutunu küçük, derleme süresini kısa tutmak için yapılan bu kısıtlamaya gerek kalmıyor.
Sınırsız CSS sınıfı: Bazen aşırı spesifik css ihtiyaçlarımız oluyor (top: -333px gibi) ve tailwind (veya diğer CSS frameworkleri) içerisinde olmadığı için özel sınıflar belirlemek zorunda kalıyorduk. Just In Time modunda tüm stiller ihtiyaca göre oluşturulduğundan bu sınırlamadan kurtuluyor ve top[-333px] gibi tanımlar kullanabiliyoruz.
Geliştirme ve Üretim ortamında aynı CSS: Geliştirme ortamı da dahil sadece gereken stiller oluşturulduğu için, üretimde daha küçük css elde etmek için ‘purge css’ kullanma mecburiyeti ortadan kalkıyor.
Geliştirme ortamı için daha yüksek tarayıcı performansı: Geliştirme sürümünüz üretim sürümü gibi küçük boyutlu olduğu için tarayıcı geliştirme ortamında da birkaç mb’lık bir CSS dosyasını derlemek ve uygulamak zorunda kalmıyor ve geliştirme ortamınızın performansı yükselmiş oluyor.

JIT modu nasıl etkinleştilir?

just-in-time modu etkinleştirmek için tailwind yapılandırma dosyanıza mode : ‘jit’ satırını eklemeniz yeterli.

JIT modu tema dosyalarınızı tarayarak sadece ihtiyacınız olan dosyaları tarayacağı için purge seçeneği içerisine hangi tür dosyaların tema dosyası olduğunu tanımlamanız önemli.

  // tailwind.config.js
  module.exports = {
    mode: 'jit',
   // These paths are just examples, customize them to match your project structure
   purge: [
     './public/**/*.html',
     './src/**/*.{js,jsx,ts,tsx,vue}',
   ],
    theme: {
      // ...
    }
    // ...
  }

JIT Watch modu nasıl etkinleştirilir?

Tema dosyalarınız değişltiğinde css’in yeniden oluşturulmasını sağlamak için watch modunu kullanabilirsiniz. package.json dosyanızı aşağıdaki şekilde düzenleyerek tailwind watch modunda çalıştırabilirsiniz. (npm run dev komutu ile çalıştırdığınızda tailwind watch modunda çalışacaktır.)

// package.json
{
  // ...
  scripts: {
    // Set TAILWIND_MODE=watch when starting your dev server
    "dev": "TAILWIND_MODE=watch postcss -i tailwind.css -o build.css --watch",

    // Do not set TAILWIND_MODE for one-off builds
    "build": "postcss -i tailwind.css -o build.css",
    // ...
  },
  // ...
}