Stăpânește CSS Tailwind cu modul său Just-in-Time (JIT).

Publicat: 2022-04-23

Cadrele de utilitate ne ajută să ne proiectăm paginile web mai rapid, iar Tailwind CSS a devenit unul dintre cele mai populare. Dar a fi popular nu înseamnă perfecțiune.

Au existat câteva provocări în utilizarea Tailwind CSS, cum ar fi să avem o foaie de stil uriașă în timpul dezvoltării și să activem variante suplimentare pe cont propriu, printre altele. O soluție la unele dintre aceste provocări va fi concentrarea noastră generală în acest tutorial.

În acest tutorial, vom vorbi despre o caracteristică foarte importantă a cadrului CSS Tailwind cunoscută sub numele de compilator just-in-time, denumit mai frecvent compilatorul JIT.

Vom evidenția caracteristicile și beneficiile utilizării compilatorului Tailwind CSS JIT, cum să-l activăm și vom vedea câteva exemple practice.

Să începem.


Ce este compilatorul Tailwind CSS JIT (just-in-time)?

Înainte de a vorbi despre compilatorul just-in-time, trebuie mai întâi să vorbim despre Tailwind CSS.

Tailwind CSS este un cadru CSS de utilitate, cu un set de clase CSS predefinite care pot fi aplicate direct în marcajul nostru pentru a accelera proiectarea paginilor web și pentru a menține coerența în proiectare folosind sisteme predefinite.

Înainte de lansarea compilatorului JIT, dimensiunea fișierului CSS Tailwind generat după instalare este de obicei de până la 3 MB. Pe măsură ce continuați să configurați și să personalizați Tailwind, dimensiunea fișierului continuă să devină mai mare - în unele cazuri, puteți ajunge la o foaie de stil de până la 15 MB.

Deși toate stilurile noastre neutilizate vor fi curățate în timpul producției, acest lucru nu este cazul în timpul dezvoltării. Cu o foaie de stil de până la 10 MB sau chiar 20 MB, suntem obligați să întâmpinăm probleme și să facem întârzierea instrumentelor noastre de dezvoltare.

Cu compilatorul JIT, stilurile sunt generate pe măsură ce ne construim proiectele. Aceasta înseamnă că numai clasele de utilitate pe care le utilizați în prezent vor fi incluse în dimensiunea foii de stil, nu toate clasele de utilitate care vin cu Tailwind CSS.

Beneficiile utilizării modului CSS JIT Tailwind

În această secțiune, vom discuta câteva dintre beneficiile utilizării compilatorului JIT. Ei includ:

  1. Foaia de stil este aceeași în dezvoltare și producție.
  2. Timp de construcție mai rapid.
  3. Toate variantele sunt activate implicit.
  4. Compilarea în timpul dezvoltării este mult mai rapidă.
  5. Sunt generate doar stilurile utilizate.
  6. Variantele pot fi stivuite.
  7. Performanță îmbunătățită a instrumentelor de dezvoltare.

Dezavantajele utilizării Tailwind CSS JIT Compiler

Limitările cunoscute în prezent conform documentației GitHub a compilatorului JIT sunt:

  • Opțiunile avansate PurgeCSS nu sunt acceptate.
  • „Puteți doar @apply clase care fac parte din core, generate de pluginuri sau definite într-o regulă @layer . Nu puteți @apply clase CSS arbitrare care nu sunt definite într-o regulă @layer .”
  • Există suport doar pentru PostCSS 8.

Directiva @apply este folosită pentru a aplica clase de utilitate în CSS-ul nostru personalizat. Acest lucru este util atunci când definim stiluri CSS personalizate, dar am prefera să folosim câteva clase de utilitate deja definite. Iată un exemplu despre cum funcționează directiva @apply :

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

În codul de mai sus, am adăugat o culoare verde la o clasă CSS personalizată. Culoarea verde a fost aplicată folosind o clasă de utilitate Tailwind.

Aflați despre o caracteristică foarte importantă a cadrului CSS Tailwind, cunoscută sub numele de compilator just-in-time, în acest ghid util. Faceți clic pentru a trimite pe Tweet

Cum să activați modul CSS JIT Tailwind

Rețineți că, la momentul scrierii, versiunea 3 a Tailwind CSS a fost deja lansată și este activată implicit când instalați Tailwind CSS. Explicațiile de mai jos pentru activarea compilatorului JIT nu se aplică pentru versiunea 3 și mai sus. Fiecare alt exemplu abordat în acest tutorial este compatibil cu versiunea 3.

Este destul de ușor să activați compilatorul JIT. Tot ce trebuie să faceți este să vă actualizați fișierul tailwind.config.js adăugând proprietatea mode care ar trebui să aibă valoarea „jit”.

Iată cum ar trebui să arate tailwind.config.js:

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

Linia pe care trebuie să ne concentrăm este partea în care am adăugat:

 modul: 'jit'

Acest lucru ne permite să folosim caracteristicile compilatorului JIT.

După ce ați terminat, puteți rula comanda de compilare și puteți vedea dimensiunea fișierului micșorându-vă. Singurele stiluri pe care le vei vedea vor fi cele pe care le folosești.

Cu dimensiunea redusă a fișierului, foaia de stil în timpul dezvoltării și producției va fi aceeași. Posibilitatea de întârziere a instrumentelor de dezvoltare va fi, de asemenea, redusă la minimum, iar codul dvs. se compila mai rapid pe măsură ce vă construiți proiectele.

În continuare, vom vedea câteva aplicații practice ale compilatorului JIT.

Acest lucru ne permite să folosim caracteristicile compilatorului JIT.

După ce ați terminat, puteți rula comanda de compilare și puteți vedea dimensiunea fișierului micșorându-vă. Singurele stiluri pe care le vei vedea vor fi cele pe care le folosești.

Cu dimensiunea redusă a fișierului, foaia de stil în timpul dezvoltării și producției va fi aceeași. Posibilitatea de întârziere a instrumentelor de dezvoltare va fi, de asemenea, redusă la minimum, iar codul dvs. se compila mai rapid pe măsură ce vă construiți proiectele.

În continuare, vom vedea câteva aplicații practice ale compilatorului JIT.

Cum se utilizează Tailwind CSS JIT Compiler

Vom vedea câteva exemple practice ale compilatorului JIT în această secțiune. Vom începe cu valori arbitrare care ne ajută să extindem sistemul de proiectare al lui Tailwind.

Valori arbitrare

Pot apărea cazuri în care preferăm să folosim valori în afara sistemului de proiectare deja creat. Aceste valori pot fi pentru culorile noastre, umplutură, margine, lățime și așa mai departe.

Compilatorul JIT ne permite să realizăm acest lucru folosind valori arbitrare. Aceste valori arbitrare ne permit să ieșim din sistemul de proiectare și să ne definim propriile valori personalizate. Veți vedea aceste valori în această sintaxă: [300px], [#FA8072].

Pentru a face acest lucru, trebuie să plasăm valoarea între paranteze drepte, astfel încât Tailwind să știe că definim noi valori în sistemul nostru de proiectare. Iată un exemplu mai jos:

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

În exemplul de mai sus, am folosit două valori noi — 300px și 500px — care nu existau inițial în sistemul de proiectare. Înainte de compilatorul JIT, probabil că va trebui să definiți mai întâi aceste valori în fișierul config.js pentru a obține același efect.

Următorul exemplu arată cum puteți defini noi valori de culoare ca:

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

Aici, am creat un paragraf cu o culoare de fundal somon. Nu veți vedea o clasă de utilitate Tailwind care spune bg-salmon, dar putem defini aceasta folosind o valoare arbitrară.

Te lupți cu timpii de nefuncționare și problemele WordPress? Kinsta este soluția de găzduire concepută pentru a vă economisi timp! Verificați caracteristicile noastre

Variante stivuibile

Cu compilatorul JIT, toate variantele sunt activate implicit, astfel încât să puteți uita să folosiți fișierul config.js pentru a activa oricare. În plus, variantele pot fi stivuite pentru a obține rezultate extraordinare.

Fiecare variantă este separată de două puncte.

Iată un exemplu:

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

Codul de mai sus creează un buton cu proprietatea de focalizare dezactivată și devine albastru când treceți cu mouse-ul.

Pseudo-Elemente

Compilatorul JIT ne permite să stilăm pseudo-element. Pseudo-elementele sunt folosite pentru a modela anumite părți ale unui element, cum ar fi stilul primei litere a unui element sau inserarea conținutului înainte/după un element.

Iată câteva exemple:

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

În exemplul de mai sus, prima literă „M” va avea o culoare verde.

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

Când evidențiați textul din codul de mai sus, acesta va avea o culoare de fundal verde.

Culorile marginilor pe fiecare parte

Din cauza dimensiunii fișierului, această caracteristică a fost omisă inițial, dar aceasta s-a schimbat odată cu lansarea compilatorului JIT. Putem da fiecărei chenaruri o culoare diferită.

Să vedem un exemplu în acest sens:

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

Am oferit div-ului nostru mai multe culori de chenar - chenarul de sus este roșu, chenarul din dreapta este albastru, chenarul de jos este galben și chenarul din stânga este verde.

Modul JIT în Tailwind CSS versiunea 3

De la Tailwind CSS versiunea 3 și mai sus, compilatorul JIT este activat în mod implicit când instalăm Tailwind CSS, astfel încât să nu ne facem griji cu privire la modificarea nimic din fișierul tailwind.config.js . Acest lucru ne permite să accesăm toate caracteristicile compilatorului JIT din mers. Tot ce trebuie să facem este să urmăm instrucțiunile de instalare pentru versiunea curentă și suntem opriți și rulăm.

Ce este compilatorul JIT... și cum vă poate îmbunătăți site-ul? Acest ghid are răspunsul Click to Tweet

rezumat

Compilatorul JIT a dus cadrul CSS Tailwind la un nivel cu totul nou. Lansarea sa a venit cu noi funcții utile pentru a ne îmbunătăți utilizarea cadrului. Nu mai trebuie să ne îngrijorăm că dimensiunea fișierului nostru este atât de grea încât instrumentele noastre de dezvoltare sunt în întârziere, deoarece sunt generate numai stilurile pe care le folosim efectiv, totul din mers.

Am văzut câteva exemple de caracteristici noi, cum ar fi variante de stivuire, elemente de stil folosind pseudo-elemente, utilizarea valorilor arbitrare pentru a extinde sistemul nostru de design și caracteristica foarte solicitată - capacitatea de a stila fiecare parte a marginii unui element individual. Am atins departe de limitările capabilităților JIT ale Tailwind aici, așa că următorii pași vor fi să testați singur și să explorați cum puteți valorifica cel mai bine caracteristicile JIT pentru propria dvs. muncă.

Ce lucruri interesante ai construit folosind compilatorul JIT? Împărtășește-ți gândurile în comentariile de mai jos.