Come sviluppatori, dopo aver studiato html, css e js solitamente si passa solitamente a studiare qualche framework per approcciarsi a concetti più complessi di quelli basilari. Per avere un feedback visivo immediato, ci si concentra su un framework css; i più famosi sono indubbiamente:
- foundation css
- bulma
- skeleton
- bootstrap
- ecc
Per mia personale esperienza il più utilizzato è stato per molti anni Bootstrap, che continua a crescere sempre più introducendo nuove features e funzionalità.
Da qualche anno si è fatto strada un altro fw css: TailwindCSS.
Un nuovo approccio
Altri fw css mi sono sempre sembrati troppo concentrati sul metodo di posizionamento degli elementi, tralasciando un po’ la parte grafica, che per certi versi risultava monotona se non personalizzata tramite css aggiuntivo. Nella maggior parte di siti, si riesce subito a riconoscere la libreria css usata se si ha l’occhio allenato XD
Questo magari è dovuto anche al non voler rendere la libreria troppo pesante, rallentando il caricamento del sito; comprensibile, ma limitativo, e forse controproducente perchè in ogni caso bisogna scrivere (e caricare) codice se si vuole avere una grafica personalizzata.
Tailwind forse nasce anche per risolvere tutte queste esigenze; con questo fw abbiamo a disposizione centinaia di classi, che non si concentrano più sul componente (una .card un bootstrap) bensì sullo stile del componente a cui si applica: non esiste una classe .btn per definire un pulsante. Il pulsante si costruisce impostando il colore di sfondo, il padding, il colore del test, ecc.
A prima vista può sembrare sconveniente o più lento andare a scrivere tutte le classi per definire lo stile ogni volta, quando invece basta una semplice classe .btn per avere una grafica base. Nella pratica però dovremmo andare ad aggiungere classi per personalizzare i componenti, finendo per avere classi come .btn-red o .btn-rounded per applicare i nostri stili; e in base al fw usato alcune classi possono anche andare in conflitto tra di loro. Con tailwind non si corre questo rischio, perchè appunto le classi definiscono uno stile singolo.
TailwindCSS compiler e performance
Come dicevamo, uno degli aspetti fondamentali per un buon framework css è il suo peso e quanto incide sul caricamento del sito. Anche in questo tailwind mostra di essere un fw all’avanguardia con soluzioni innovative. Quando installato tramite npm o comunque avendo la cli di tailwind a disposizione configurata correttamente, durante la compilazione per andare in produzione nel file css finale verranno racchiuse solo le classi che vengono effettivamente utilizzate nel codice. Quindi se non usiamo mai una classe come .bg-red-500, questa verrà esclusa, riducendo al minimo le dimensioni del file finale. Secondo le statistiche e i dati raccolti, un file compilato per la produzione pesa in media 6kb grazie a questa strategia. Maggiori info possono essere trovate nella documentazione ufficiale (qui).
Animazioni, colori personalizzati, plugin
Le potenzialità di Tailwind sembrano non finire mai! Da poco è uscita la versione 3, che ha introdotto tante nuove funzionalità. Una delle cose che più mi hanno colpito è stata l’introduzione di classi dinamiche che accettano valori personalizzati; già nella versione precedente era semplicissimo personalizzare i colori, dimensioni ecc, con questa versione abbiamo inoltre a disposizione classi dinamiche come .bg-[codice_colore]
Altro punto di forza molto potente è la facilità con cui animare/trasformare gli elementi; tailwind mette a disposizione moltissime classi per poter avere un effetto wow ed elegante. Anche in questo caso ogni classe è delegata a svolgere un determinato compito, quindi abbiamo classi come .transform e .animate, .scale-110 e .translate-x-110 e così via.
Tailwind mette a disposizione tantissime altre funzioni e personalizzazioni, che magari approfondiremo in un altro articolo (facci sapere nei commenti se può interessarti), abbiamo già scoperto tanto di questo magnifico framework css.
Qui a MuzaStudio ce ne siamo innamorati già da tempo, e lo usiamo ogni volta che possiamo, poichè l’abbiamo ritenuto uno strumento davvero completo e flessibile. Disegnare Carsoon è stato davvero facile e divertente grazie a tailwind!
E tu? Hai avuto modo di usare tailwind? Hai creato qualche componente particolare? Parliamone nei commenti, chissà che non nasca qualche nuovo design di tendenza!
