Tailwind CSS: perché dovresti usarlo

Dopo aver provato vari framework CSS più o meno complessi ed aver usato per anni Bootstrap, ora non riesco a immaginare un progetto futuro senza utilizzare Tailwind CSS.

Questo sito, ad esempio, è realizzato con Tailwind CSS v2. (Se vuoi scoprire cosa c’è sotto al cofano di questo sito, c'è una pagina ad hoc)

In cosa differisce da Bootstrap, Bulma ecc?

La maggior parte dei framework CSS come Bootstrap, Material UI, Bulma ecc. hanno componenti pre-progettati come schede, pulsanti, barre di navigazione, avvisi. Utilizzi quei componenti e crei progetti con quei componenti.

In Tailwind invece non hai un set di componenti pre-progettati. Hai solo classi di utilità che puoi combinare fra loro per ottenere il layout e i componenti che vuoi.

Come è vantaggioso rispetto ad altri framework?

• I siti fatti in Bootstrap sono facilmente identificabili, hanno infatti molti aspetti in comune che non è un problema ma tarpa un po’ le ali alla creatività in funzione di una maggiore velocità. Con Tailwind CSS, non avendo componenti predefiniti da utilizzare, questo non può succedere.
• Per superare questo problema inizi a sovrascrivere gli stili predefiniti del framework. Se l'hai già fatto, saprai che la situazione ti sfugge di mano abbastanza velocemente. Mentre in Tailwind creare componenti personalizzati è la normalità.
• Risolvi una delle cose più difficili dell'informatica: dare un nome alle cose, in questo caso inventare i nomi delle classi. In Tailwind spesso non creerai nessuna classe.
• Responsive by design: in Tailwind non è necessario scrivere stili personalizzati per gestire la reattività per schermi di dimensioni diverse. Basta usare le utilità reattive per gestire tutto facilmente.
• Pseudo classi: possiamo applicare lo stile agli elementi al passaggio del mouse, focus ecc. In modo simile a come facciamo con le classi reattive in Tailwind.
• E molto di più: modalità dark, animazioni, ottimizzazione (il foglio di stile di questo sito pesa 24KB) ecc.

Guida introduttiva a Tailwind CSS

Il modo più semplice per iniziare con Tailwind CSS è usare la versione in CDN e iniziare a giocarci. Per progetti seri, consiglio ovviamente di installarlo tramite npm.

Utilizzando la versione CDN:

Aggiungi la CDN al tuo codice HTML:

<link
   href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>"
   rel="stylesheet"
/>

Installandolo tramite npm:

Per usarlo, devi prima installare Tailwind CSS tramite npm come dipendenza dev (l’opzione -D).

npm install tailwindcss -D

Crea un file di configurazione tailwind: questo file viene utilizzato per configurare e personalizzare tailwind a tuo piacimento.

npx tailwindcss init --full

Questo commando crea il file di configurazione tailwind.config.js nella radice del tuo progetto con, all’interno, tutti i parametri personalizzabili. Senza il parametro --full creerà uno scaffolding vuoto.

A questo punto aggiungi Tailwind al tuo file CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Se usi un compilatore (cosa ormai scontata) come Webpack, Laravel Mix o PostCSS, devi configurarlo. Ti rimando alla documentazione ufficiale per i dettagli.

Utilizzo di Tailwind CSS

Come accennato in precedenza, Tailwind CSS ci fornisce una grande serie di classi, il cui scopo è indicato dal nome. Ad esempio, per avere un testo i grassetto, basterà assegnargli la classe font-bold. Allo stesso modo, ci sono molte classi per colori, display, flexbox, CSS Grid, spaziatura, tipografia, bordi, transizioni ecc.

Di seguito vediamo alcune delle classi fornite da Tailwind:

Colori

Tailwind viene fornito con una tavolozza predefinita con con 12 colori e 10 sfumature per ogni colore ma, se non vi bastano o vi aggradano, potete aggiungerne o cambiarli tramite il file di configurazione: taiwind.config.js.

Qui puoi vedere la tavolozza predefinita.

Margine e padding

Di default tutti gli elementi hanno margin e padding a 0. Per impostare il margine, usiamo le classi di utilità che iniziano per m, quali mx per i margini orizzontali (x appunto) e my per quelli verticali. Serve più granularità? No problem: mt, mr, mb, ml; dove la t sta per top, la r per right, lab per bottom e la l per left. Si ok, ma a quanto lo impostiamo questo margine? Semplice: aggiungiamo un trattino ed un numero. I numeri 1, 3 e 4 seguono la scala di spaziatura predefinita seguita da Tailwind. Ovviamente vale la stessa regola per il padding con la p al posto della m.

// margine sinistro e destro a 1 (0.25rem)
<div class=”mx-1”></div>
// margine superiore e inferiore a 3 (0.75rem)
<div class=”my-3”></div>
// margine superiore a -2 (-0,5rem)
<div class=”-mt-2”></div>
// margine tutto attorno a 4 (1rem) 
<div class=”m4”></div>

Reattività

Qui avviene una delle magie di Tailwind. Supponiamo di volere che un paragrafo abbia il carattere di colore blu su schermi piccoli e verde su schermi grandi, possiamo farlo molto facilmente con il seguente HTML:

<p class="text-blue-600 lg:text-green-600">
  Hello world!
</p>

Display

Diverse classi utili per controllare la proprietà di visualizzazione di un elemento. Ad esempio, per fare in modo che un elemento sia block, diamo all'elemento una classe block. Allo stesso modo, usiamo le classi flex, grid, table ecc. per dare i rispettivi stili all'elemento.

Ovviamente questa è una carrellata veloce. Esistono molte altre classi ma ti rimando alla documentazione ufficiale.

Quello su cui vorrei porre l’attenzione è l’ottimizzazione.

Performance

Una build completa di Tailwind v2 non ottimizzata pesa circa 3MB. Ma come vi ho già detto, quella del mio sito pesa 24KB. Come è possibile? Rimuovendo tutte le classi CSS inutilizzate.

Per rendere l'esperienza di sviluppo il più produttiva possibile, Tailwind genera migliaia di classi di utilità, la maggior parte delle quali probabilmente non verranno mai usate.

Pensa a Tailwind come a una gigantesca scatola di LEGO: scarichi tutto sul pavimento e costruisci ciò che vuoi costruire, poi quando hai finito rimetti tutti i pezzi che non hai usato nella scatola.

Ad esempio, Tailwind genera utilità di margine per ogni dimensione nella scala di spaziatura, per ogni lato di un elemento a cui potresti voler applicare il margine, a ogni punto di interruzione che stai utilizzando nel tuo progetto. Ciò porta a centinaia di combinazioni diverse che è importante avere a disposizione, ma non tutte probabilmente necessarie.

Come si fa a rimettere tutti i pezzi non usati nella scatola?

Fortunatamente non a mano!
Tailwind usa PurgeCSS dietro le quinte. Questo script geniale parsa tutti i file di layout che abbiamo creato e, tramite una espressione regolare, capisce tutte le classi che abbiamo usato e rimuove le altre.

Ovviamente bisogna avere qualche accortezza affinchè il parser riesca a capire le classi ma ci fornisce anche una scappatoia quando alcune classi non sono rilevabili (ad esempio sono salvate sul DB): la proprietà safelist.

module.exports = {
   purge: {
      content: [
          './resources/views/**/*.blade.php',
          './resources/js/**/*.vue',
      ],
      // These options are passed through directly to PurgeCSS
      options: {
         safelist: ['bg-red-500', 'list-disc'],
      }
   },
   // ...
}

Vi rimando alla documentazione per le info dettagliate.

Conclusione

Bene, qui termina la rapida carrellata introduttiva a Tailwind. Non mi resta che consigliarti di provarlo, sicuro che difficilmente tornerai indietro.

PS: guardati l’animazione nella home page di Tailwind per vedere un po’ di codice “scritto” live.