{"id":53675,"date":"2022-04-26T08:24:39","date_gmt":"2022-04-26T07:24:39","guid":{"rendered":"https:\/\/kinqsta.com\/it\/?p=53675&preview=true&preview_id=53675"},"modified":"2023-02-03T10:53:14","modified_gmt":"2023-02-03T09:53:14","slug":"tailwind-jit","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/it\/blog\/tailwind-jit\/","title":{"rendered":"Come Sfruttare al Massimo Tailwind CSS con la Modalit\u00e0 Just-in-Time (JIT)"},"content":{"rendered":"

I frameworks utility-first ci aiutano a progettare le nostre pagine web pi\u00f9 velocemente e Tailwind CSS<\/a> \u00e8 diventato tra questi uno dei pi\u00f9 popolari. Ma essere popolari non significa essere perfetti.<\/p>\n

Ci sono state difficolt\u00e0 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\u00e0 l’obiettivo generale di questo tutorial.<\/p>\n

In questo tutorial parleremo di una caratteristica molto importante del framework Tailwind CSS, conosciuta come compiler just-in-time, pi\u00f9 comunemente noto come compiler JIT.<\/p>\n

Metteremo in evidenza le caratteristiche e i benefici del compiler JIT di Tailwind CSS, scopriremo come abilitarlo e vedremo alcuni esempi pratici.<\/p>\n

Iniziamo.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Cos’\u00e8 il Compiler CSS JIT (Just-in-Time) di Tailwind?<\/h2>\n

Prima di parlare del compiler just-in-time, dobbiamo prima parlare di Tailwind CSS.<\/p>\n

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.<\/p>\n

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\u00f2, la dimensione del file diventa sempre maggiore – in alcuni casi, potreste anche ritrovarvi con un foglio di stile di 15 MB.<\/p>\n

Anche se tutti i nostri stili inutilizzati vengono eliminati durante la produzione, non \u00e8 cos\u00ec 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.<\/p>\n

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

Vantaggi della Modalit\u00e0 JIT di Tailwind CSS<\/h2>\n

In questa sezione analizzeremo alcuni dei vantaggi del compiler JIT. Tra questi ricordiamo:<\/p>\n

    \n
  1. Il foglio di stile \u00e8 lo stesso nello sviluppo<\/a> e nella produzione.<\/li>\n
  2. Tempo di compilazione pi\u00f9 veloce.<\/li>\n
  3. Tutte le varianti sono abilitate di default.<\/li>\n
  4. La compilazione durante lo sviluppo \u00e8 molto pi\u00f9 rapida.<\/li>\n
  5. Vengono generati solo gli stili utilizzati.<\/li>\n
  6. Le varianti possono essere impilate.<\/li>\n
  7. Le prestazioni degli strumenti di sviluppo sono migliori.<\/li>\n<\/ol>\n

    Svantaggi del Compiler CSS JIT di Tailwind<\/h2>\n

    Le limitazioni al momento note secondo la documentazione GitHub del compiler JIT<\/a> sono le seguenti:<\/p>\n