Tailwind CSS Just In Time Modu

Bu yazıda PurgeCSS’e yeni bir soluk getiren Tailwind CSS Just In Time modunu inceleyiyoruz.


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",
    // ...
  },
  // ...
}
Bu Yazıda Yapılan Değişiklikler
  • 11.05.2022: Yazı özeti düzenlendi. İçerikte ufak bir düzeltme (Düzenleme 1) yapıldı.

Bir soru, öneri ya da yorumunuz mu var?

Evren Bal

Ben Evren BAL

1996'dan beri ‘Internet canlısıyım!’

Evren Bal Hakkında daha fazla bilgi.

Tanışmak isterseniz hemen sosyal medyadan iletişime geçebilirsiniz.

Bana Ulaşın

Bana Ulaşın

  • Bir sorunuz mu var?
  • Yazıda bir hata mı farkettiniz?
  • Sayfa ile ilgili bir öneriniz mi var?
  • Yazmamı önereceğiniz bir konu mu var?

Lütfen iletişim formunu kullanarak veya sosyal medya hesaplarımdan bana ulaşın.

Digital Ocean Logo

VPS sunucusu denemek ister misiniz?

Digital Ocean'a referans bağlantımdan kayıt olarak yeni oluşturacağınız hesabınızı 60 gün geçerli 100$ kredi ile açabilirsiniz. Bu miktar yüksek performanslı VPS'leri bile denemeniz için yeterlidir.

Yapacağınız onca kurulumun boşa gitmemesi için benim tavsiyem uzun vadede kullanabileceğiniz özellik ve maliyetlerde bir sunucu oluşturmanızdır.

Ücretsiz 100$ kredi bağlantısı

60 günlük denemeniz sonunda eğer devam etmek istemezseniz hiç bir ücret ödemeyeceksiniz. Hizmeti kullanmaya devam etmek isterseniz harcamanız 25$'a ulaştığında benim hesabıma da 25$ kredi yüklenecektir.

Diğer bir deyişle, siz 100$ ücretsiz krediyi her halükarda kazanırken, daha sonra ücretli devam etmeye karar verirseniz ben de 25$ kredi kazanacağım.

Copyright © 2022 - Evren BAL