Tailwind CSS e gli aspetti che contraddistinguono il framework utility-first

Tailwind CSS è un framework utility-first che consente agli utenti di definire i componenti autonomamente. Il CSS è molto popolare, ma richiede un’ampia conoscenza preliminare.

Un framework CSS è una raccolta di funzioni ed elementi necessari per la progettazione di siti web. Poiché gli sviluppatori possono utilizzare le opzioni preesistenti, la progettazione di siti web e la collaborazione tra i team sono semplificate. I framework CSS utilizzano librerie di codice che vengono impiegate nel codice HTML a questo scopo.

Tailwind CSS è un popolare framework CSS interamente orientato all’utilità e fornisce agli utenti lezioni CSS di basso livello su PostCSS che possono essere utilizzate per definire componenti e design in modo indipendente. Tailwind CSS è stato sviluppato da Adam Wathan e rilasciato per la prima volta nel 2017. Da allora è stato installato da milioni di utenti.

I principali vantaggi dei framework utility-first come Tailwind CSS sono la flessibilità e le conseguenti possibilità di personalizzazione. A differenza dei tradizionali fogli di stile a cascata (CSS), i framework utility-first non includono componenti precostituiti ma offrono classi di utilità. Queste contengono stili predefiniti che possono essere applicati a un elemento. Ciò semplifica il processo, si traduce in un codice più chiaro e fornisce molte opzioni di design aggiuntive che contribuiscono a creare siti web più personalizzati.

Tailwind CSS è particolarmente indicato per gli utenti che hanno una conoscenza pregressa dei CSS e per quelli che hanno familiarità con le loro caratteristiche speciali. Una conoscenza di base dell’HTML è importante per lavorare con il framework utility-first, poiché i componenti devono essere creati in modo indipendente e tutti gli stili sono memorizzati direttamente nei file HTML. Tranne che per alcuni elementi di base come margini, dimensioni e colori, Tailwind CSS non utilizza impostazioni predefinite. Se gli sviluppatori hanno esperienza, possono usare Tailwind CSS per progettare liberamente gli elementi del sito web e risparmiare tempo.

Il CSS è adatto a progetti web front end di qualsiasi tipo e può essere utilizzato insieme ai framework JavaScript più diffusi come, ad esempio, Lavarel, Vue.js e React. Questa combinazione permette di eliminare l’approccio orientato agli oggetti di molti altri framework.

A causa del suo particolare 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 è necessario passare dai file HTML ai file CSS. Ciò solitamente permette di svolgere i compiti necessari più agevolmente.
• Lavorare con Tailwind CSS consente soluzioni più personalizzate per gli elementi importanti di un sito web. In questo modo il sito si distingue dalla massa.
• Grazie alle classi predefinite e all’uso di media query CSS Tailwind CSS è un framework responsive che funziona bene anche sui dispositivi mobili.
• Lo sviluppo complessivo è più veloce e facilitato dalle classi di utilità.
• Le classi predefinite aiutano a comprimere i CSS.
• Tailwind CSS semplifica l’implementazione di componenti modali.
• Il framework è stabile e raramente presenta bug o errori.
• Se avete già familiarità con i CSS, la struttura logica e l’approccio del framework utility-first presentano un gran vantaggio e sarà relativamente facile da imparare.
• Se state imparando a lavorare con i CSS e desiderate allo stesso tempo utilizzare Tailwind CSS, la documentazione completa e di facile comprensione vi guiderà.

• Nonostante i vantaggi sopra citati, utilizzare il framework per la prima volta è piuttosto difficile, se non si ha esperienza con le peculiarità e le insidie dei CSS.
• Il codice può risultare confuso perché molte informazioni vengono memorizzate nel file HTML. Mescolare design e HTML viola il principio della “separazione delle preoccupazioni”.
• Quando si installa Tailwind CSS, gli stili CSS predefiniti vengono eliminati. È necessario quindi ricreare tutti gli elementi. Questo vale anche per componenti importanti come pulsanti, intestazioni o barre di navigazione.
• Alcuni elementi HTML si ripetono nel markup, quindi il codice viola il principio “Non ripeterti!” (in inglese conosciuto come “Don’t repeat yourself”). Ciò accade, ad esempio, quando un determinato elemento deve essere utilizzato più volte nel sito web.

Come altri framework, Tailwind CSS mira a facilitare il processo di creazione di un sito web. Grazie alle classi predefinite e alle regole CSS conosciute, i siti web possono essere creati più velocemente. Poiché il principio è sempre lo stesso, gli utenti esperti possono passare più rapidamente da un framework all’altro. Mentre le soluzioni convenzionali forniscono componenti fissi come pulsanti o barre di navigazione, Tailwind CSS permette, cioè richiede, la creazione individuale. A differenza di altri framework, Tailwind CSS si rivolge a professionisti con una conoscenza approfondita dei CSS.

Il modo più semplice per aggiungere Tailwind CSS è usando un gestore di pacchetti. Dovreste avere Node.js installato sul vostro computer. Seguite i seguenti passaggi per procedere:

Create un nuovo progetto nel terminale.

Questo crea un file package.json nella directory principale. L’estensione “-y” è usata per impostare i valori predefiniti.

Per installare l’ultima versione stabile di Tailwind CSS come dipendenza, usate il seguente comando:

L’installazione può richiedere 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 aggiungete le seguenti righe al file CSS:

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

La popolarità di Tailwind CSS non sorprende. Gli sviluppatori esperti che hanno familiarità con i trucchi CSS apprezzeranno questo framework poiché consente loro di lavorare più velocemente e senza vincoli. Tuttavia, chi è agli inizi farebbe meglio a usare un’alternativa, poiché imparare a usare il framework è più difficile e vi sono insite più possibilità di errore.