Tailwind CSS: un nuovo approccio al CSS

In cosa differisce Tailwind CSS da altri framework?

I framework tradizionali, tra cui il più celebre Bootstrap, forniscono una serie di componenti o classi css preassemblati per creare oggetti di vario tipo come card, bottoni, modali, form, messaggi di avviso, barre di navigazione ecc. Dotarsi di un framework di questo tipo velocizza senza dubbio il lavoro e la prototipizzazione di elementi grafici che però con il passare del tempo risultano particolarmente scomodi quando abbiamo l’esigenza o il bisogno di modificare il loro design.

Tailwind CSS è diverso.

Non fornisce componenti preconfezionati bensì classi di utility che possiamo combinare fra loro e che permettono di realizzare qualsiasi layout senza alcun tipo di vincolo.

Quali vantaggi ha Tailwind CSS rispetto ad altri framework?

• Supponiamo di stare utilizzando Bootstrap per un’applicazione e che, per qualche motivo, si deve ridefinire l’aspetto di uno dei componenti offerti dalla libreria. Cosa facciamo solitamente? Sovrascriviamo gli stili predefiniti del framework. Se ciò ti è capitato – cosa molto probabile peraltro – saprai che questa situazione sfugge di mano abbastanza velocemente. Utilizzando Tailwind CSS invece creare componenti personalizzati è la normalità.
• Si risolve uno dei problemi più “difficili” dello sviluppo software: “dare un nome alle cose”, nel caso specifico inventarsi i nomi delle classi. Con Tailwind CSS molto probabilmente non avrai mai bisogno di doverti creare una classe.
• Responsive by design: non è necessario scrivere stili personalizzati per gestire la reattività dei componenti per schermi di dimensioni diverse. Basta utilizzare le utility di Responsive Design per gestire tutto facilmente.
• Pseudo classi: possiamo applicare facilmente stili agli elementi per eventi quali il passaggio del mouse, focus ecc.
• Modalità dark: è presente una configurazione che ci permette di utilizzare un tema scuro già pronto.
• Sono disponibili diverse animazioni già pronte all’uso.
• Ottimizzazione, sia in termini di occupazione di spazio all’interno della nostra applicazione che di performance in fase di compilazione.

Installazione e guida introduttiva

Il modo più semplice per iniziare con Tailwind CSS è installandolo tramite cdn per poi familiarizzare con il framework. Per progetti seri, il mio consiglio è di installarlo tramite npm.

Vi riporto il comando di installazione via cdn: <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>"rel="stylesheet"/>

Installazione tramite npm

Per quanto riguarda npm, il comando è npm install -D tailwindcss@latest postcss@latest autoprefixer@latest.

Qualora voleste personalizzare l’installazione di Tailwind CSS, dovete generare un file di configurazione per il progetto tramite il comando npx tailwindcss init --full.

Questo commando crea il file di configurazione tailwind.config.js, contenente tutti i parametri personalizzabili, nella root del progetto. Lo stesso comando senza il parametro --full creerà una struttura vuota.

Arrivati a questo punto bisognerà aggiungere il framework al file css, e per farlo sarà sufficiente aggiungere le seguenti tre dipendenze:

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

Nota: Se utilizzate IDE (cosa ormai scontata) come Webpack Laravel Mix o PostCSS dovrete configurare Tailwind CSS. Per questo vi rimando alla pagina dedicata.

Performance

Parliamo più approfonditamente di un aspetto molto interessante di Tailwind CSS: l’ottimizzazione del progetto.

Una build completa non ottimizzata pesa circa 3MB, dimensione che può essere migliorata rimuovendo tutte le classi css inutilizzate.

Per rendere l’esperienza di sviluppo il più produttiva possibile il framework genera migliaia di classi di utilità, la maggior parte delle quali probabilmente non verranno mai usate. Per rendere meglio l’idea, userà questa metafora: pensate a Tailwind CSS come ad una scatola piena di pezzi LEGO. Ora, ogni volta che si vuole costruire qualcosa si svuota la scatola per terra e si useranno alcuni dei tanti pezzi a disposizione, con lo svantaggio dato dal fatto che bisognerà riporre nella scatola tutti i pezzi non utilizzati. “Noioso no?”

“Perché ho usato questo esempio?”

Il framework 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 progetto. Ciò porta ad avere centinaia di combinazioni diverse che sì è importante avere a disposizione, ma non tutte probabilmente saranno necessarie.

“Come si fa a rimettere tutti i pezzi non usati nella scatola?” Fortunatamente non a mano!

Tailwind CSS usa PurgeCSS dietro le quinte. Questo script controlla tutti i file di layout che sono stati creati e, tramite una espressione regolare, capisce quali sono state le classi utilizzate e di conseguenza rimuove quelle inutilizzate.

Ovviamente bisogna avere qualche accortezza affinché PurgeCSS riesca ad individuare le classi ma risulta comunque un tool utilissimo perché fornisce una “via di fuga” quando alcune classi non sono rilevabili.

Di seguito vi riporto una configurazione standard:

//tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Utilizzo di Tailwind CSS

Come accennato in precedenza, Tailwind CSS ci fornisce una ampia varietà di classi il cui scopo è indicato dal loro nome. Ad esempio, per avere un testo in grassetto, sarà sufficiente assegnare al componente la classe con nome font-bold. Lo stesso discorso vale qualora volessimo utilizzare classi per colori, display, flexbox, grid, spaziatura, font, bordi, transizioni ecc.

Di seguito vedremo alcune delle  principali classi fornite da Tailwind CSS.

Colori

Il framework viene fornito con una tavolozza predefinita con 12 colori e 10 sfumature per ognuno di essi ma, se non dovessero bastarvi o non soddisfarvi, potrete aggiungerne di nuovi o modificarli tramite il file di configurazione taiwind.config.js. A questo link potete consultare la tavolozza predefinita.

Margine e padding

Di default tutti gli elementi grafici hanno le proprietà di margin e padding settate a 0. Per impostare il margine si utilizzano le classi di utilità che iniziano con la lettera m: potremo usare mx per i margini orizzontali e my per quelli verticali. E’ anche possibile utilizzare mt, mr, mb, ml dove la t sta per top, la r per right, la b per bottom e la l per left. Una volta scelto dove impostare il margine non ci resta che aggiungere un trattino ed un numero. I numeri 1, 3 e 4 seguono la scala di spaziatura predefinita seguita da Tailwind CSS. Ovviamente vale la stessa regola per il padding con la lettera p al posto della m.

La seguente porzione di codice mostra degli esempi di quanto appena descritto:

//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 CSS. Supponiamo di volere modificare il comportamento di un paragrafo affinché abbia il testo di colore blu su schermi piccoli e verde su schermi grandi. Possiamo farlo molto facilmente con il seguente codice HTML:

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

Display

Come scritto in precedenza abbiamo a disposizione anche le classi per lavorare sulla visualizzazione di un elemento. Ad esempio, per fare in modo che un elemento sia di tipo block, diamo all’elemento una classe block. Allo stesso modo, usiamo le classi flex, grid, table ecc. per dare i rispettivi stili all’elemento.

Conclusione

In questo articolo vi ho mostrato solo alcune delle svariate classi che Tailwind CSS presenta. Ne esistono molte altre con cui potete realizzare interfacce grafiche di ogni tipo, pe approfondimenti consultate pure la documentazione ufficiale.

Prima di salutarvi vi lascio il link ad una piccola demo per provare il framework senza dover istallare nulla.

Grazie e alla prossima, nel frattempo…provate Tailwind CSS e fatemi sapere come vi trovate!