Master Tailwind CSS con la sua modalità Just-in-Time (JIT).

Pubblicato: 2022-04-23

I framework Utility-first ci aiutano a progettare le nostre pagine Web più velocemente e Tailwind CSS è diventato uno dei più popolari. Ma essere popolare non significa perfezione.

Ci sono state alcune sfide nell'uso di Tailwind CSS, come avere un enorme foglio di stile durante lo sviluppo e dover abilitare varianti extra da soli, tra gli altri. Una soluzione ad alcune di queste sfide sarà il nostro obiettivo generale in questo tutorial.

In questo tutorial parleremo di una caratteristica molto importante del framework Tailwind CSS noto come compilatore just-in-time, più comunemente indicato come compilatore JIT.

Evidenzieremo le caratteristiche ei vantaggi dell'utilizzo del compilatore Tailwind CSS JIT, come abilitarlo e vedremo alcuni esempi pratici.

Iniziamo.


Che cos'è il compilatore Tailwind CSS JIT (Just-in-Time)?

Prima di parlare del compilatore just-in-time, dobbiamo prima parlare di Tailwind CSS.

Tailwind CSS è un framework CSS di utilità con un insieme di classi CSS predefinite che possono essere applicate direttamente nel nostro markup per accelerare la progettazione di pagine Web e mantenere la coerenza nella progettazione utilizzando sistemi predefiniti.

Prima del rilascio del compilatore JIT, la dimensione del nostro file CSS Tailwind generato dopo l'installazione è in genere fino a 3 MB. Mentre continui a configurare e personalizzare Tailwind, tuttavia, le dimensioni del file continuano a crescere: in alcuni casi, puoi finire con un foglio di stile grande quanto 15 MB.

Sebbene tutti i nostri stili inutilizzati vengano eliminati durante la produzione, questo non è il caso durante lo sviluppo. Con un foglio di stile grande quanto 10 MB o anche 20 MB, siamo destinati a incorrere in problemi e causare ritardi ai nostri strumenti di sviluppo.

Con il compilatore JIT, gli stili vengono generati mentre costruiamo i nostri progetti. Ciò significa che solo le classi di utilità che stai attualmente utilizzando saranno incluse nelle dimensioni del tuo foglio di stile, non tutte le classi di utilità fornite con Tailwind CSS.

Vantaggi dell'utilizzo della modalità JIT CSS di Tailwind

In questa sezione verranno illustrati alcuni dei vantaggi dell'utilizzo del compilatore JIT. Loro includono:

  1. Il tuo foglio di stile è lo stesso in fase di sviluppo e produzione.
  2. Tempo di costruzione più veloce.
  3. Tutte le varianti sono abilitate per impostazione predefinita.
  4. La compilazione durante lo sviluppo è molto più veloce.
  5. Vengono generati solo gli stili utilizzati.
  6. Le varianti possono essere impilate.
  7. Miglioramento delle prestazioni degli strumenti di sviluppo.

Svantaggi dell'utilizzo del compilatore JIT CSS di Tailwind

Le limitazioni attualmente note secondo la documentazione GitHub del compilatore JIT sono:

  • Le opzioni avanzate di PurgeCSS non sono supportate.
  • “Puoi @apply solo classi che fanno parte del core, generate da plugin o definite all'interno di una regola @layer . Non puoi @apply classi CSS arbitrarie che non sono definite all'interno di una regola @layer ."
  • C'è solo il supporto per PostCSS 8.

La direttiva @apply viene utilizzata per applicare classi di utilità nel nostro CSS personalizzato. Questo è utile quando definiamo stili CSS personalizzati ma preferiamo utilizzare alcune classi di utilità già definite. Ecco un esempio di come funziona la direttiva @apply :

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

Nel codice sopra, abbiamo aggiunto un colore verde a una classe CSS personalizzata. Il colore verde è stato applicato utilizzando una classe di utilità Tailwind.

Scopri una caratteristica molto importante del framework Tailwind CSS, noto come compilatore just-in-time, in questa utile guida. Clicca per twittare

Come abilitare la modalità JIT CSS di Tailwind

Si noti che al momento della scrittura, Tailwind CSS versione 3 è già stata rilasciata ed è abilitata per impostazione predefinita quando si installa Tailwind CSS. Le spiegazioni seguenti per abilitare il compilatore JIT non si applicano alla versione 3 e successive. Ogni altro esempio trattato in questo tutorial è compatibile con la versione 3.

È abbastanza facile abilitare il compilatore JIT. Tutto quello che devi fare è aggiornare il tuo file tailwind.config.js aggiungendo la proprietà mode che dovrebbe avere un valore di 'jit'.

Ecco come dovrebbe essere il tuo tailwind.config.js:

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

La linea su cui concentrarsi è la parte in cui abbiamo aggiunto:

 modalità: 'jit'

Questo ci consente di utilizzare le funzionalità del compilatore JIT.

Al termine, puoi eseguire il comando build e vedere diminuire le dimensioni del tuo file. Gli unici stili che vedrai saranno quelli che stai utilizzando.

Con la dimensione del file ridotta, il tuo foglio di stile durante lo sviluppo e la produzione sarà lo stesso. Anche la possibilità di ritardo degli strumenti di sviluppo sarà ridotta al minimo e il tuo codice verrà compilato più velocemente mentre crei i tuoi progetti.

Successivamente, vedremo alcune applicazioni pratiche del compilatore JIT.

Questo ci consente di utilizzare le funzionalità del compilatore JIT.

Al termine, puoi eseguire il comando build e vedere diminuire le dimensioni del tuo file. Gli unici stili che vedrai saranno quelli che stai utilizzando.

Con la dimensione del file ridotta, il tuo foglio di stile durante lo sviluppo e la produzione sarà lo stesso. Anche la possibilità di ritardo degli strumenti di sviluppo sarà ridotta al minimo e il tuo codice verrà compilato più velocemente mentre crei i tuoi progetti.

Successivamente, vedremo alcune applicazioni pratiche del compilatore JIT.

Come utilizzare il compilatore JIT CSS di Tailwind

Vedremo alcuni esempi pratici del compilatore JIT in questa sezione. Inizieremo con valori arbitrari che ci aiutano a estendere il sistema di progettazione di Tailwind.

Valori arbitrari

Possono sorgere casi in cui preferiremmo utilizzare valori al di fuori del sistema di progettazione già creato. Questi valori possono essere per i nostri colori, riempimento, margine, larghezza e così via.

Il compilatore JIT ci consente di raggiungere questo obiettivo con l'uso di valori arbitrari. Questi valori arbitrari ci consentono di uscire dal sistema di progettazione e definire i nostri valori personalizzati. Vedresti questi valori in questa sintassi: [300px], [#FA8072].

Per fare ciò, dobbiamo annidare il valore tra parentesi quadre in modo che Tailwind sappia che stiamo definendo nuovi valori nel nostro sistema di progettazione. Ecco un esempio qui sotto:

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

Nell'esempio sopra, abbiamo utilizzato due nuovi valori, 300px e 500px, che inizialmente non esistevano nel sistema di progettazione. Prima del compilatore JIT, probabilmente dovresti prima definire questi valori nel file config.js per ottenere lo stesso effetto.

L'esempio successivo mostra come definire nuovi valori di colore come:

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

Qui abbiamo creato un paragrafo con un colore di sfondo salmone. Non vedresti una classe di utilità Tailwind che dice bg-salmon, ma siamo in grado di definirla usando un valore arbitrario.

Lottando con tempi di inattività e problemi con WordPress? Kinsta è la soluzione di hosting progettata per farti risparmiare tempo! Scopri le nostre caratteristiche

Varianti impilabili

Con il compilatore JIT, tutte le varianti sono abilitate per impostazione predefinita, quindi puoi dimenticarti di usare il file config.js per abilitarne qualcuna. In aggiunta a questo, le varianti possono essere impilate per ottenere risultati fantastici.

Ogni variante è separata da due punti.

Ecco un esempio:

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

Il codice sopra crea un pulsante con la proprietà focus disabilitata e diventa blu quando si passa con il mouse.

Pseudo-elementi

Il compilatore JIT ci permette di definire uno stile pseudo-elemento. Gli pseudo-elementi sono usati per dare uno stile a parti specifiche di un elemento, come ad esempio lo stile della prima lettera di un elemento o l'inserimento di contenuto prima/dopo un elemento.

Ecco alcuni esempi:

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

Nell'esempio sopra, la prima lettera "M" avrà un colore verde.

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

Quando evidenzi il testo dal codice sopra, avrà un colore di sfondo verde.

Colori del bordo per lato

A causa di considerazioni sulle dimensioni dei file, questa funzionalità è stata inizialmente omessa, ma è cambiata con il rilascio del compilatore JIT. Possiamo dare a ogni bordo un colore diverso.

Vediamo un esempio di questo:

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

Abbiamo assegnato al nostro div più colori del bordo: il bordo superiore è rosso, il bordo destro è blu, il bordo inferiore è giallo e il bordo sinistro è verde.

Modalità JIT in Tailwind CSS versione 3

Da Tailwind CSS versione 3 e successive, il compilatore JIT è abilitato per impostazione predefinita quando installiamo Tailwind CSS, quindi non dobbiamo preoccuparci di alterare nulla nel file tailwind.config.js . Questo ci consente di accedere a tutte le funzionalità del compilatore JIT in movimento. Tutto quello che dobbiamo fare è seguire le istruzioni di installazione per la versione corrente e siamo operativi.

Cos'è il compilatore JIT... e come può migliorare il tuo sito? Questa guida ha la risposta Clicca per twittare

Sommario

Il compilatore JIT ha portato il framework Tailwind CSS a un livello completamente nuovo. La sua versione è arrivata con nuove utili funzionalità per migliorare il nostro uso del framework. Non dobbiamo più preoccuparci che le dimensioni dei nostri file siano così pesanti da far ritardare i nostri strumenti di sviluppo, poiché solo gli stili che utilizziamo effettivamente vengono generati, tutto in movimento.

Abbiamo visto alcuni esempi delle nuove funzionalità come l'impilamento di varianti, lo stile di elementi utilizzando pseudo-elementi, l'utilizzo di valori arbitrari per estendere il nostro sistema di progettazione e la caratteristica molto richiesta: la capacità di modellare individualmente ciascun lato del bordo di un elemento. Non abbiamo raggiunto qui i limiti delle capacità JIT di Tailwind, quindi i tuoi prossimi passi saranno testare te stesso ed esplorare come sfruttare al meglio le funzionalità di JIT per il tuo lavoro.

Quali cose interessanti hai creato utilizzando il compilatore JIT? Condividi i tuoi pensieri nei commenti qui sotto.