Nel panorama dei framework CSS, da tanti anni dominato da Bootstrap, si sta affermando da qualche tempo un nuovo protagonista: Tailwind CSS. Come recita il sito ufficiale, e non potremmo trovare migliore descrizione, “Tailwind CSS è un framework CSS di basso livello, molto personalizzabile, che offre tutti gli elementi di costruzione di cui hai bisogno per creare progetti su misura, senza fastidiosi stili contro cui devi combattere per sovrascriverli.”
Perché usare Tailwind CSS
La prima domanda che probabilmente uno sviluppatore farà è: perché dovrei abbandonare Bootstrap, un framework solido, utilizzato da tantissimi siti web e con una grande comunità alle spalle? Il motivo principale per il quale, secondo noi, Tailwind CSS è un’opzione molto valida da tenere in considerazione è contenuta nella descrizione che potete leggere sopra, e cioè che è un framework a basso livello. Ciò vuol dire che Tailwind CSS non ci fornisce, ad esempio, elementi “preconfezionati” ma ci permette di costruire qualsiasi cosa in maniera molto dettagliata e puntuale.
Ma facciamo un esempio classico, la creazione di un semplice pulsante. Con Bootstrap, il codice sarebbe:
| <button type=”button” class=”btn btn-success”>
Send! </button> |
Mentre, per avere lo stesso risultato con Tailwind
| <button class=”bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded”>
Send! </button> |
Da questo esempio verrebbe da dire che Bootstrap è più semplice perché serve molto meno codice per ottenere lo stesso risultato. Però, se volessimo un pulsante con padding maggiore, con Bootstrap dovremmo creare una nuova classe, da aggiungere a quella esistente. Invece con Tailwind ci basterà modificare le classi py e px con le dimensioni che più ci soddisfano.
Questo semplice esempio ci fa capire che con Tailwind CSS possiamo avere un controllo maggiore sul nostro stile rispetto ad altri framework, e questo aspetto secondo noi è molto importante. Inoltre, non utilizzare elementi predefiniti ci permette di creare dei componenti davvero unici e totalmente flessibili per le nostre esigenze: una delle critiche che da tempo vengono fatte a Bootstrap è che i siti che lo sfruttano tendono ad assomigliarsi l’un l’altro.
Le utility
Ma come facciamo a creare questi componenti originali e personalizzati? Nell’esempio del pusante abbiamo utilizzato delle classi come bg-green-500 oppure font-bold: queste sono le utility di Tailwind CSS. Il framework, infatti, fornisce un amplissimo set di classi già pronte da utilizzare per modellare a nostro piacimento qualsiasi elemento HTML, senza scrivere una riga di CSS.
Ovviamente non possiamo elencare tutte queste classi, per conoscerle vi rimandiamo alla documentazione ufficiale di Tailwind che spiega molto bene come utilizzarle al meglio, vogliamo comunque proporvi alcuni esempi.
Il primo riguarda il colore di background. Come avete potuto dedurre precedentemente, per impostare lo sfondo verde in un elemento abbiamo utilizzato bg-green-500. Il significato delle prime due parole della classe è abbastanza chiaro, mentre il numero finale indica il “peso” del colore, ossia quanto chiaro (o scuro) sarà il nostro sfondo. Quindi, utilizzando bg-green-100, il nostro sfondo sarà verde molto chiaro, con bg-green-900 il colore sarà molto scuro e con bg-green-500 otterremo uno sfondo di media intensità.
Altre utility molto utilizzate sono quelle relative alla gestione del Column Grid. Come per Bootstrap, il framework utilizza Flexbox ma a differenza del concorrente, dove di default utilizziamo una suddivisione fino a 12 colonne, con Tailwind possiamo invece frazionare liberamente lo spazio a nostra disposizione. Ecco qualche esempio preso direttamente dalla documentazione ufficiale.
Suddivisione della pagina in due colonne:
| <!– Two columns –>
<div class=”flex mb-4″> <div class=”w-1/2 bg-gray-400 h-12″></div> <div class=”w-1/2 bg-gray-500 h-12″></div> </div> |
Suddivisione della pagina in tre colonne:
| <!– Three columns –>
<div class=”flex mb-4″> <div class=”w-1/3 bg-gray-400 h-12″></div> <div class=”w-1/3 bg-gray-500 h-12″></div> <div class=”w-1/3 bg-gray-400 h-12″></div> </div> |
Suddivisione della pagina in cinque colonne:
| <!– Five columns –>
<div class=”flex mb-4″> <div class=”w-1/5 bg-gray-500 h-12″></div> <div class=”w-1/5 bg-gray-400 h-12″></div> <div class=”w-1/5 bg-gray-500 h-12″></div> <div class=”w-1/5 bg-gray-400 h-12″></div> <div class=”w-1/5 bg-gray-500 h-12″></div> </div> |
Ovviamente possiamo creare anche dei layout con colonne di dimensioni diverse, ad esempio, con una colonna centrale più grande e due laterali più piccole:
| <!– Three columns –>
<div class=”flex mb-4″> <div class=”w-1/4 bg-gray-400 h-12″></div> <div class=”w-2/4 bg-gray-500 h-12″></div> <div class=”w-1/4 bg-gray-400 h-12″></div> </div> |
In questo articolo abbiamo voluto fornirvi una breve introduzione a Tailwind CSS, sia perché lo riteniamo un framework molto valido, funzionale e grazie al quale possiamo creare delle UI molto belle, originali e calibrate sulle nostre necessità, ma anche perché con Laravel 8 è stato introdotto Laravel Jetstream, la nuovissima applicazione di scaffolding che utilizza proprio Tailwind CSS al posto di Bootstrap!
