Tam Zamanında (JIT) Modu ile Master Tailwind CSS

Yayınlanan: 2022-04-23

Yardımcı program çerçeveleri, web sayfalarımızı daha hızlı tasarlamamıza yardımcı olur ve Tailwind CSS, en popüler olanlardan biri haline geldi. Ancak popüler olmak mükemmellik anlamına gelmez.

Tailwind CSS'yi kullanmanın, geliştirme sırasında büyük bir stil sayfasına sahip olmak ve diğerlerinin yanı sıra kendi başımıza ekstra varyantları etkinleştirmek gibi birkaç zorluk vardı. Bu eğitimdeki genel odak noktamız bu zorluklardan bazılarına bir çözüm olacaktır.

Bu öğreticide, daha yaygın olarak JIT derleyicisi olarak adlandırılan, tam zamanında derleyici olarak bilinen Tailwind CSS çerçevesinin çok önemli bir özelliğinden bahsedeceğiz.

Tailwind CSS JIT derleyicisini kullanmanın özelliklerini ve faydalarını, nasıl etkinleştirileceğini vurgulayacağız ve bazı pratik örnekler göreceğiz.

Başlayalım.


Tailwind CSS JIT (Tam Zamanında) Derleyici Nedir?

Tam zamanında derleyici hakkında konuşmadan önce, Tailwind CSS hakkında konuşmamız gerekiyor.

Tailwind CSS, web sayfalarının tasarımını hızlandırmak ve önceden tanımlanmış sistemleri kullanarak tasarımda tutarlılığı korumak için doğrudan işaretlememizde uygulanabilen bir dizi önceden tanımlanmış CSS sınıfına sahip, yardımcı program öncelikli bir CSS çerçevesidir.

JIT derleyicisinin yayınlanmasından önce, kurulumdan sonra oluşturulan Tailwind CSS dosya boyutumuz genellikle 3 MB'a kadardır. Tailwind'i yapılandırmaya ve özelleştirmeye devam ettikçe, dosya boyutu büyümeye devam ediyor - bazı durumlarda, 15 MB büyüklüğünde bir stil sayfası elde edebilirsiniz.

Kullanılmayan tüm stillerimiz üretim sırasında temizlenecek olsa da, geliştirme sırasında durum böyle değil. 10 MB ve hatta 20 MB büyüklüğünde bir stil sayfasıyla, sorunlarla karşılaşmamız ve geliştirme araçlarımızın gecikmesine neden olmamız kaçınılmazdır.

JIT derleyicisiyle, projelerimizi oluştururken stiller oluşturulur. Bu, Tailwind CSS ile birlikte gelen tüm yardımcı program sınıflarının değil, yalnızca şu anda kullanmakta olduğunuz yardımcı program sınıflarının stil sayfanızın boyutuna dahil edileceği anlamına gelir.

Tailwind CSS JIT Modunu Kullanmanın Faydaları

Bu bölümde, JIT derleyicisini kullanmanın bazı faydalarını tartışacağız. Onlar içerir:

  1. Stil sayfanız geliştirme ve üretimde aynıdır.
  2. Daha hızlı inşa süresi.
  3. Tüm varyantlar varsayılan olarak etkindir.
  4. Geliştirme sırasında derleme çok daha hızlıdır.
  5. Yalnızca kullanılan stiller oluşturulur.
  6. Varyantlar istiflenebilir.
  7. Geliştirilmiş geliştirme araçları performansı.

Tailwind CSS JIT Derleyicisini Kullanmanın Dezavantajları

JIT derleyicisi GitHub belgelerine göre şu anda bilinen sınırlamalar şunlardır:

  • Gelişmiş PurgeCSS seçenekleri desteklenmez.
  • “Yalnızca çekirdeğin parçası olan, eklentiler tarafından oluşturulan veya bir @layer kuralı içinde tanımlanan sınıfları @apply yapabilirsiniz. Bir @apply kuralı içinde tanımlanmayan keyfi CSS sınıflarını @layer .”
  • Yalnızca PostCSS 8 desteği vardır.

@apply yönergesi, özel CSS'mizde yardımcı program sınıflarını uygulamak için kullanılır. Bu, özel CSS stilleri tanımlarken yararlıdır, ancak önceden tanımlanmış bazı yardımcı program sınıflarını kullanmayı tercih ederiz. @apply yönergesinin nasıl çalıştığına dair bir örnek:

 .my-custom-css { @apply text-green-500; }

Yukarıdaki kodda, özel bir CSS sınıfına yeşil bir renk ekledik. Yeşil renk, bir Tailwind yardımcı program sınıfı kullanılarak uygulandı.

Bu faydalı kılavuzda, tam zamanında derleyici olarak bilinen Tailwind CSS çerçevesinin çok önemli bir özelliği hakkında bilgi edinin. Tweetlemek için tıklayın

Tailwind CSS JIT Modu Nasıl Etkinleştirilir

Yazma sırasında olduğu gibi, Tailwind CSS sürüm 3'ün zaten yayınlandığını ve Tailwind CSS'yi yüklediğinizde varsayılan olarak etkinleştirildiğini unutmayın. JIT derleyicisini etkinleştirmek için aşağıdaki açıklamalar sürüm 3 ve üzeri için geçerli değildir. Bu eğitimde ele alınan diğer tüm örnekler sürüm 3 ile uyumludur.

JIT derleyicisini etkinleştirmek oldukça kolaydır. Tek yapmanız gereken, 'jit' değerine sahip olması gereken mode özelliğini ekleyerek tailwind.config.js dosyanızı güncellemektir.

İşte tailwind.config.js'nizin nasıl görünmesi gerektiği:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

Odaklanmamız gereken satır, eklediğimiz kısımdır:

 mod: 'jit'

Bu, JIT derleyicisinin özelliklerini kullanmamızı sağlar.

Bu yapıldıktan sonra, build komutunu çalıştırabilir ve dosya boyutunuzun azaldığını görebilirsiniz. Göreceğiniz tek stiller, kullandığınız stiller olacaktır.

Küçültülmüş dosya boyutuyla, geliştirme ve üretim sırasında stil sayfanız aynı olacaktır. Geliştirici araçlarının gecikme olasılığı da en aza indirilecek ve siz projelerinizi oluştururken kodunuz daha hızlı derlenecektir.

Daha sonra, JIT derleyicisinin bazı pratik uygulamalarını göreceğiz.

Bu, JIT derleyicisinin özelliklerini kullanmamızı sağlar.

Bu yapıldıktan sonra, build komutunu çalıştırabilir ve dosya boyutunuzun azaldığını görebilirsiniz. Göreceğiniz tek stiller, kullandığınız stiller olacaktır.

Küçültülmüş dosya boyutuyla, geliştirme ve üretim sırasında stil sayfanız aynı olacaktır. Geliştirici araçlarının gecikme olasılığı da en aza indirilecek ve siz projelerinizi oluştururken kodunuz daha hızlı derlenecektir.

Daha sonra, JIT derleyicisinin bazı pratik uygulamalarını göreceğiz.

Tailwind CSS JIT Derleyicisi Nasıl Kullanılır

Bu bölümde JIT derleyicisinin bazı pratik örneklerini göreceğiz. Tailwind'in tasarım sistemini genişletmemize yardımcı olacak keyfi değerlerle başlayacağız.

Keyfi Değerler

Halihazırda oluşturulmuş tasarım sisteminin dışındaki değerleri kullanmayı tercih ettiğimiz durumlar ortaya çıkabilir. Bu değerler renklerimiz, dolgu, kenar boşluğu, genişlik vb. için olabilir.

JIT derleyicisi, keyfi değerler kullanarak bunu başarmamızı sağlar. Bu keyfi değerler, tasarım sisteminden çıkmamızı ve kendi özel değerlerimizi tanımlamamızı sağlar. Bu değerleri şu söz diziminde görürsünüz: [300px], [#FA8072].

Bunu yapmak için, Tailwind'in tasarım sistemimizde yeni değerler tanımladığımızı bilmesi için değeri köşeli parantez içine yerleştirmeliyiz. İşte aşağıda bir örnek:

 <div class="mt-[300px] w-[500px]"> </div>

Yukarıdaki örnekte, başlangıçta tasarım sisteminde mevcut olmayan iki yeni değer (300px ve 500px) kullandık. JIT derleyicisinden önce, aynı etkiyi elde etmek için muhtemelen ilk önce bu değerleri config.js dosyasında tanımlamanız gerekir.

Sonraki örnek, yeni renk değerlerini şu şekilde nasıl tanımlayabileceğinizi gösterir:

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Burada somon arka plan rengine sahip bir paragraf oluşturduk. bg-salmon diyen bir Tailwind yardımcı programı sınıfı göremezsiniz, ancak bunu keyfi bir değer kullanarak tanımlayabiliriz.

Kesinti süresi ve WordPress sorunlarıyla mı mücadele ediyorsunuz? Kinsta, size zaman kazandırmak için tasarlanmış barındırma çözümüdür! Özelliklerimize göz atın

İstiflenebilir Varyantlar

JIT derleyicisiyle, tüm varyantlar varsayılan olarak etkinleştirilmiştir, böylece herhangi birini etkinleştirmek için config.js dosyasını kullanmayı unutabilirsiniz. Buna ek olarak, harika sonuçlar elde etmek için varyantlar istiflenebilir.

Her varyant iki nokta üst üste ile ayrılır.

İşte bir örnek:

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

Yukarıdaki kod, odak özelliği devre dışı bırakılmış bir düğme oluşturur ve üzerine gelindiğinde maviye döner.

Sözde Öğeler

JIT derleyicisi, sözde öğeye stil vermemizi sağlar. Sözde öğeler, bir öğenin ilk harfine stil vermek veya bir öğeden önce/sonra içerik eklemek gibi bir öğenin belirli bölümlerine stil vermek için kullanılır.

İşte birkaç örnek:

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

Yukarıdaki örnekte, ilk “M” harfi yeşil renkte olacaktır.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

Yukarıdaki koddan metni vurguladığınızda yeşil bir arka plan rengine sahip olacaktır.

Kenar Başına Kenarlık Renkleri

Dosya boyutuyla ilgili hususlar nedeniyle, bu özellik başlangıçta dışarıda bırakılmıştı, ancak JIT derleyicisinin piyasaya sürülmesiyle bu durum değişti. Her bordüre farklı bir renk verebiliriz.

Bunun bir örneğini görelim:

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

Divimize birden fazla kenarlık rengi verdik - üst kenarlık kırmızı, sağ kenarlık mavi, alt kenarlık sarı ve sol kenarlık yeşil.

Tailwind CSS Sürüm 3'te JIT Modu

Tailwind CSS sürüm 3 ve üzeri sürümlerde, Tailwind CSS'yi kurduğumuzda JIT derleyicisi varsayılan olarak etkinleştirilir, böylece tailwind.config.js dosyasındaki herhangi bir şeyi değiştirme konusunda endişelenmemize gerek kalmaz. Bu, hareket halindeyken JIT derleyicisinin tüm özelliklerine erişmemizi sağlar. Tek yapmamız gereken, mevcut sürüm için kurulum talimatlarını takip etmek ve çalışmaya başlıyoruz.

JIT derleyicisi nedir... ve sitenizi nasıl geliştirebilir? Bu kılavuzda cevap var Tweetlemek için tıklayın

Özet

JIT derleyicisi, Tailwind CSS çerçevesini tamamen yeni bir düzeye taşıdı. Sürümü, çerçeve kullanımımızı daha iyi hale getirmek için yeni yararlı özelliklerle geldi. Artık dosya boyutumuzun, geliştirme araçlarımızın gecikmesine neden olacak kadar ağır olması konusunda endişelenmemize gerek yok, çünkü hareket halindeyken yalnızca gerçekten kullandığımız stiller oluşturuluyor.

Değişkenleri istifleme, öğeleri sözde öğeler kullanarak şekillendirme, tasarım sistemimizi genişletmek için rastgele değerler kullanma ve çok talep edilen özellik gibi yeni özelliklerin birkaç örneğini gördük - bir öğenin kenarlığının her iki tarafını ayrı ayrı stillendirme yeteneği. Burada Tailwind'in JIT yeteneklerinin sınırlamalarına ulaşmaktan çok uzaktayız, bu nedenle bir sonraki adımınız kendiniz test etmek ve JIT'in özelliklerinden kendi işiniz için en iyi şekilde nasıl yararlanabileceğinizi keşfetmek olacaktır.

JIT derleyicisini kullanarak ne gibi harika şeyler yaptınız? Düşüncelerinizi aşağıdaki yorumlarda paylaşın.