I frameworks utility-first ci aiutano a progettare le nostre pagine web più velocemente e Tailwind CSS è diventato tra questi uno dei più popolari. Ma essere popolari non significa essere perfetti.

Ci sono state difficoltà nell’utilizzare Tailwind CSS, tra cui avere un enorme foglio di stile durante lo sviluppo e dover abilitare varianti extra. Trovare soluzioni ad alcuni di questi problemi sarà l’obiettivo generale di questo tutorial.

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

Metteremo in evidenza le caratteristiche e i benefici del compiler JIT di Tailwind CSS, scopriremo come abilitarlo e vedremo alcuni esempi pratici.

Iniziamo.

Cos’è il Compiler CSS JIT (Just-in-Time) di Tailwind?

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

Si tratta di un framework CSS utility-first con un insieme di classi CSS predefinite che possono essere applicate direttamente nel markup per velocizzare la progettazione delle pagine web e mantenere la coerenza del design utilizzando sistemi predefiniti.

Prima del rilascio del compiler JIT, la dimensione del nostro file CSS generato da Tailwind dopo l’installazione di solito raggiunge i 3 MB. Man mano che continuate a configurare e personalizzare Tailwind, però, la dimensione del file diventa sempre maggiore – in alcuni casi, potreste anche ritrovarvi con un foglio di stile di 15 MB.

Anche se tutti i nostri stili inutilizzati vengono eliminati durante la produzione, non è così durante lo sviluppo. Con un foglio di stile di 10 MB o anche 20 MB, siamo destinati ad avere problemi e ritardi negli strumenti di sviluppo che utilizziamo.

Con il compiler JIT, gli stili sono generati mentre creiamo i nostri progetti. Questo significa che solo le classi di utilità che utilizzate al momento saranno incluse nel vostro foglio di stile, ma non tutte le classi di utilità che vengono fornite con Tailwind CSS.

Vantaggi della Modalità JIT di Tailwind CSS

In questa sezione analizzeremo alcuni dei vantaggi del compiler JIT. Tra questi ricordiamo:

  1. Il foglio di stile è lo stesso nello sviluppo e nella produzione.
  2. Tempo di compilazione più veloce.
  3. Tutte le varianti sono abilitate di default.
  4. La compilazione durante lo sviluppo è molto più rapida.
  5. Vengono generati solo gli stili utilizzati.
  6. Le varianti possono essere impilate.
  7. Le prestazioni degli strumenti di sviluppo sono migliori.

Svantaggi del Compiler CSS JIT di Tailwind

Le limitazioni al momento note secondo la documentazione GitHub del compiler JIT sono le seguenti:

  • Le opzioni avanzate di PurgeCSS non sono supportate.
  • “Potete solo @apply classi che fanno parte del core, generate dai plugin o definite all’interno di una regola @layer. Non potreste @apply classi CSS arbitrarie che non sono definite all’interno di una regola @layer “
  • C’è solo il supporto di PostCSS 8.

La direttiva @apply è utilizzata per applicare classi di utilità nel nostro CSS personalizzato. Questo è utile se vogliamo definire stili CSS personalizzati ma preferiamo fare uso di alcune classi di utilità già definite. Ecco un esempio della direttiva @apply:

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

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

Come Attivare la Modalità JIT di Tailwind CSS

Al momento in cui scriviamo, la versione 3 di Tailwind CSS è già stata rilasciata ed è abilitata di default. Le spiegazioni che seguono per abilitare il compiler 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 compiler JIT. Tutto quello che dovete fare è aggiornare il file tailwind.config.js aggiungendo la proprietà mode che dovrebbe avere il valore ‘jit’.

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

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

La riga da considerare è quella dove abbiamo aggiunto

mode: 'jit'

Questo ci permette di utilizzare le funzioni del compiler JIT.

Dopo aver fatto queste modifiche, potrete eseguire il comando di compilazione e veder diminuire la dimensione del vostro file. Gli unici stili che vedrete saranno quelli che state usando.

Con la dimensione ridotta del file, il vostro foglio di stile sarà lo stesso sia durante lo sviluppo che durante la produzione. La possibilità che gli strumenti di sviluppo siano in ritardo sarà ridotta al minimo e il vostro codice si compilerà più velocemente mentre sviluppate i vostri progetti.

Di seguito vedremo alcune applicazioni pratiche del compiler JIT.

Questo ci permette di utilizzare le caratteristiche del compiler JIT.

Una volta terminato, si può eseguire il comando di compilazione e vedere la dimensione del file diminuire. Gli unici stili che si vedranno saranno quelli utilizzati.

Con le dimensioni ridotte del file, il foglio di stile durante lo sviluppo e la produzione sarà lo stesso. Anche la possibilità che gli strumenti di sviluppo siano in ritardo sarà ridotta al minimo e il codice verrà compilato più velocemente durante la creazione dei progetti.

Vedremo poi alcune applicazioni pratiche del compiler JIT.

Come Utilizzare il Compiler JIT di Tailwind CSS

In questa sezione, vedremo alcuni esempi pratici del compiler JIT. Inizieremo con i valori arbitrari che ci aiutano ad estendere il sistema di progettazione di Tailwind.

Valori Arbitrari

In alcuni casi potremmo preferire utilizzare valori al di fuori del sistema di progettazione già creato. Questi valori possono riguardare colori, padding, margine, larghezza e così via.

Il compiler JIT ci permette di farlo con l’uso di valori arbitrari. Questi valori arbitrari ci permettono di uscire dal sistema di progettazione e definire i nostri valori personalizzati: [300px], [#FA8072].

Per farlo, 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:

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

Qui sopra, abbiamo utilizzato due nuovi valori – 300px e 500px – che non esistevano inizialmente nel sistema di progettazione. Prima del compiler JIT, probabilmente avreste dovuto prima definire questi valori nel file config.js per ottenere lo stesso effetto.

Il prossimo esempio mostra come definire nuovi valori di colore:

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

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

Varianti Impilabili

Con il compiler JIT, tutte le varianti sono abilitate di default quindi potete anche dimenticarvi di usare il file config.js per abilitarle. Oltre a questo, le varianti possono essere impilate per ottenere risultati impressionanti.

Ogni variante è separata da due punti.

Ecco un esempio:

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

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

Pseudo-Elementi

Il compiler JIT permette di stilizzare gli pseudo-elementi. Questi sono utilizzati per assegnare stili a parti specifiche di un elemento come lo stile della prima lettera di un elemento o l’inserimento di contenuti prima o dopo un elemento.

Ecco alcuni esempi:

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

Nell’esempio qui 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 evidenziate il testo presente nel codice qui sopra, questo avrà un colore di sfondo verde.

Colori del Bordo per Lato

A causa di considerazioni sulla dimensione del file, questa caratteristica è stata lasciata inizialmente fuori, ma le cose sono cambiate con il rilascio del compiler JIT. Possiamo dare ad ogni bordo un colore diverso.

Vediamo un esempio:

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

Abbiamo dato alla nostra div bordi di più colori – il bordo superiore è rosso, il bordo destro è blu, il bordo inferiore è giallo e il bordo sinistro è verde.

Modalità JIT in Tailwind CSS Versione 3

A partire dalla versione 3 di Tailwind CSS, il compiler JIT è abilitato di default, quindi non dobbiamo preoccuparci di modificare nulla nel file tailwind.config.js. Questo ci permette di accedere a tutte le funzionalità del compiler JIT al volo. Tutto quello che dobbiamo fare è seguire le istruzioni per l’installazione della versione corrente.

Riepilogo

Il compiler JIT ha portato il framework CSS Tailwind su un livello completamente nuovo. Al rilascio sono arrivate nuove utili funzionalità che permettono di fare un uso migliore del framework. Non dobbiamo più preoccuparci che i nostri file siano così pesanti da rallentare i nostri strumenti di sviluppo, dato che vengono generati solo gli stili che utilizziamo effettivamente.

Abbiamo visto alcuni esempi delle nuove funzionalità, come le varianti di impilamento, lo stile degli elementi con gli pseudo-elementi, l’utilizzo di valori arbitrari per estendere il sistema di progettazione e una funzionalità molto richiesta – la possibilità di stilizzare ogni lato del bordo di un elemento singolarmente. Siamo lontani dal raggiungere i limiti delle capacità di JIT di Tailwind, quindi i vostri prossimi passi saranno quelli di testare da soli ed esplorare come sfruttare al meglio le caratteristiche di JIT per il vostro lavoro.

Cosa avete sviluppato di interessante con il compiler JIT? Condividete le vostre esperienze nei commenti qui sotto.

Ihechikara Abba

Ihechikara è uno software developer e technical writer. Si diverte a scrivere articoli su tecnologie web, programmazione e argomenti legati all'IT. Collegatevi con Ihechikara su X.