Tailwind CSS e gli aspetti che con­trad­di­stin­guo­no il framework utility-first

Tailwind CSS è un framework utility-first che consente agli utenti di definire i com­po­nen­ti au­to­no­ma­men­te. Il CSS è molto popolare, ma richiede un’ampia co­no­scen­za pre­li­mi­na­re.

Un framework CSS è una raccolta di funzioni ed elementi necessari per la pro­get­ta­zio­ne di siti web. Poiché gli svi­lup­pa­to­ri possono uti­liz­za­re le opzioni pre­e­si­sten­ti, la pro­get­ta­zio­ne di siti web e la col­la­bo­ra­zio­ne tra i team sono sem­pli­fi­ca­te. I framework CSS uti­liz­za­no librerie di codice che vengono impiegate nel codice HTML a questo scopo.

Tailwind CSS è un popolare framework CSS in­te­ra­men­te orientato all’utilità e fornisce agli utenti lezioni CSS di basso livello su PostCSS che possono essere uti­liz­za­te per definire com­po­nen­ti e design in modo in­di­pen­den­te. Tailwind CSS è stato svi­lup­pa­to da Adam Wathan e ri­la­scia­to per la prima volta nel 2017. Da allora è stato in­stal­la­to da milioni di utenti.

I prin­ci­pa­li vantaggi dei framework utility-first come Tailwind CSS sono la fles­si­bi­li­tà e le con­se­guen­ti pos­si­bi­li­tà di per­so­na­liz­za­zio­ne. A dif­fe­ren­za dei tra­di­zio­na­li fogli di stile a cascata (CSS), i framework utility-first non includono com­po­nen­ti pre­co­sti­tui­ti ma offrono classi di utilità. Queste con­ten­go­no stili pre­de­fi­ni­ti che possono essere applicati a un elemento. Ciò sem­pli­fi­ca il processo, si traduce in un codice più chiaro e fornisce molte opzioni di design ag­giun­ti­ve che con­tri­bui­sco­no a creare siti web più per­so­na­liz­za­ti.

Tailwind CSS è par­ti­co­lar­men­te indicato per gli utenti che hanno una co­no­scen­za pregressa dei CSS e per quelli che hanno fa­mi­lia­ri­tà con le loro ca­rat­te­ri­sti­che speciali. Una co­no­scen­za di base dell’HTML è im­por­tan­te per lavorare con il framework utility-first, poiché i com­po­nen­ti devono essere creati in modo in­di­pen­den­te e tutti gli stili sono me­mo­riz­za­ti di­ret­ta­men­te nei file HTML. Tranne che per alcuni elementi di base come margini, di­men­sio­ni e colori, Tailwind CSS non utilizza im­po­sta­zio­ni pre­de­fi­ni­te. Se gli svi­lup­pa­to­ri hanno espe­rien­za, possono usare Tailwind CSS per pro­get­ta­re li­be­ra­men­te gli elementi del sito web e ri­spar­mia­re tempo.

Il CSS è adatto a progetti web front end di qualsiasi tipo e può essere uti­liz­za­to insieme ai framework Ja­va­Script più diffusi come, ad esempio, Lavarel, Vue.js e React. Questa com­bi­na­zio­ne permette di eliminare l’approccio orientato agli oggetti di molti altri framework.

A causa del suo par­ti­co­la­re approccio, Tailwind CSS non è adatto a tutti. Per sapere se l’approccio utility-first è adatto alle vostre esigenze, è utile valutare i vantaggi e gli svantaggi di Tailwind CSS.

• Non è ne­ces­sa­rio passare dai file HTML ai file CSS. Ciò so­li­ta­men­te permette di svolgere i compiti necessari più age­vol­men­te.
• Lavorare con Tailwind CSS consente soluzioni più per­so­na­liz­za­te per gli elementi im­por­tan­ti di un sito web. In questo modo il sito si distingue dalla massa.
• Grazie alle classi pre­de­fi­ni­te e all’uso di media query CSS Tailwind CSS è un framework re­spon­si­ve che funziona bene anche sui di­spo­si­ti­vi mobili.
• Lo sviluppo com­ples­si­vo è più veloce e fa­ci­li­ta­to dalle classi di utilità.
• Le classi pre­de­fi­ni­te aiutano a com­pri­me­re i CSS.
• Tailwind CSS sem­pli­fi­ca l’im­ple­men­ta­zio­ne di com­po­nen­ti modali.
• Il framework è stabile e raramente presenta bug o errori.
• Se avete già fa­mi­lia­ri­tà con i CSS, la struttura logica e l’approccio del framework utility-first pre­sen­ta­no un gran vantaggio e sarà re­la­ti­va­men­te facile da imparare.
• Se state imparando a lavorare con i CSS e de­si­de­ra­te allo stesso tempo uti­liz­za­re Tailwind CSS, la do­cu­men­ta­zio­ne completa e di facile com­pren­sio­ne vi guiderà.

• No­no­stan­te i vantaggi sopra citati, uti­liz­za­re il framework per la prima volta è piuttosto difficile, se non si ha espe­rien­za con le pe­cu­lia­ri­tà e le insidie dei CSS.
• Il codice può risultare confuso perché molte in­for­ma­zio­ni vengono me­mo­riz­za­te nel file HTML. Mescolare design e HTML viola il principio della “se­pa­ra­zio­ne delle pre­oc­cu­pa­zio­ni”.
• Quando si installa Tailwind CSS, gli stili CSS pre­de­fi­ni­ti vengono eliminati. È ne­ces­sa­rio quindi ricreare tutti gli elementi. Questo vale anche per com­po­nen­ti im­por­tan­ti come pulsanti, in­te­sta­zio­ni o barre di na­vi­ga­zio­ne.
• Alcuni elementi HTML si ripetono nel markup, quindi il codice viola il principio “Non ripeterti!” (in inglese co­no­sciu­to come “Don’t repeat yourself”). Ciò accade, ad esempio, quando un de­ter­mi­na­to elemento deve essere uti­liz­za­to più volte nel sito web.

Come altri framework, Tailwind CSS mira a fa­ci­li­ta­re il processo di creazione di un sito web. Grazie alle classi pre­de­fi­ni­te e alle regole CSS co­no­sciu­te, i siti web possono essere creati più ve­lo­ce­men­te. Poiché il principio è sempre lo stesso, gli utenti esperti possono passare più ra­pi­da­men­te da un framework all’altro. Mentre le soluzioni con­ven­zio­na­li for­ni­sco­no com­po­nen­ti fissi come pulsanti o barre di na­vi­ga­zio­ne, Tailwind CSS permette, cioè richiede, la creazione in­di­vi­dua­le. A dif­fe­ren­za di altri framework, Tailwind CSS si rivolge a pro­fes­sio­ni­sti con una co­no­scen­za ap­pro­fon­di­ta dei CSS.

Il modo più semplice per ag­giun­ge­re Tailwind CSS è usando un gestore di pacchetti. Dovreste avere Node.js in­stal­la­to sul vostro computer. Seguite i seguenti passaggi per procedere:

Create un nuovo progetto nel terminale.

Questo crea un file package.json nella directory prin­ci­pa­le. L’esten­sio­ne “-y” è usata per impostare i valori pre­de­fi­ni­ti.

Per in­stal­la­re l’ultima versione stabile di Tailwind CSS come di­pen­den­za, usate il seguente comando:

L’in­stal­la­zio­ne può ri­chie­de­re alcuni minuti.

Per generare il file tailwind.config.js, inserite il seguente comando:

Il contenuto del file dovrebbe essere simile a questo:

Accedete alla cartella src e ag­giun­ge­te le seguenti righe al file CSS:

Infine, inserite il seguente comando nel terminale per avviare il processo di creazione:

La po­po­la­ri­tà di Tailwind CSS non sorprende. Gli svi­lup­pa­to­ri esperti che hanno fa­mi­lia­ri­tà con i trucchi CSS ap­prez­ze­ran­no questo framework poiché consente loro di lavorare più ve­lo­ce­men­te e senza vincoli. Tuttavia, chi è agli inizi farebbe meglio a usare un’al­ter­na­ti­va, poiché imparare a usare il framework è più difficile e vi sono insite più pos­si­bi­li­tà di errore.