Installazione
L'installazione di Tailwind CSS potrebbe risultare un po' triviale. È possibile scaricarlo come modulo NodeJS sia tramite npm install tailwindcss sia con l'alternativa yarn add tailwindcss.
Come anticipato nella prima lezione, Tailwind CSS è compilato tramite PostCSS, quindi per utilizzarlo basta creare un file .css per importare le dipendenze appena scaricate:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Il file base definisce le regole base appunto, come stili di default e di reset. Il file components include le regole dei componenti base di tailwind, come ad esempio la classe .container ormai diventata uno standard de-facto. Il file utilities rappresenta il cuore del framework ovvero le classi di utility.
Per avviare la compilazione vera e propria è quindi necessario lanciare lo script npx tailwind build styles.css -o app.css. In questo esempio, il file styles.css rappresenta il nostro file sorgente, mentre app.css il file destinazione.
È possibile integrare la compilazione Tailwind CSS anche all'interno di stack già configurati postCSS, Encore, Brunch, ma anche Webpack, Gulp, Laravel Mix, e Ember.js. Rimandiamo alla documentazione ufficiale per chi fosse interessato all'argomento.
Il file di configurazione tailwind.config.js
Abbiamo appena visto come effettuare una compilazione standard del framework, ma è molto probabile che questa configurazione possa non essere sufficiente. Tramite il parametro -c è infatti possibile passare al compilatore un riferimento ad un file di configurazione:
npx tailwind build styles.css -c tailwind.config.css -o app.cssLa configurazione viene espressa tramite un file Javascript, permettendoci quindi una flessibilità importante.
Il file di configurazione serve per modificare, anche radicalmente, il file CSS generato dal framework e permette di definire il design system utilizzato dal nostro portale, così da avere un set di classi CSS di utility che si adattano perfettamente al nostro layout.
È possibile generare un prototipo di file tramite il comando npx tailwind init. Aggiungendo invece l'opzione --full, il file generato conterrà tutte le opzioni possibili:
module.exports = {
important: true,
theme: { },
variants: { },
plugins: { },
prefix: '',
separator: '-',
corePlugins: { }
}
Il valore booleano important serve per definire se le classi utility devono essere generate con la clausola !important. Questa opzione è utile esclusivamente se utilizziamo Tailwind CSS insieme ad altri framework/librerie che potrebbero avere classi più specifiche. Se usiamo esclusivamente Tailwind CSS (che è la soluzione consigliata), non è necessario modificare questa configurazione.
La sezione theme permette di configurare qualsiasi aspetto del design system del nostro portale, dai colori alle dimensioni dello schermo. È una configurazione molto importante, e ne discuteremo parecchio nelle prossime lezioni.
La sezione variants permette di definire quali varianti verranno definite per ogni classe di utility. Anche questa è una configurazione che approfondiremo in futuro.
La sezione plugins permette di includere plugin di terze parti al framework. La rivedremo quando proveremo a realizzare il nostro plugin.
La stringa prefix permette di definire un prefisso per tutte le classi generate da Tailwind CSS. Anche questa opzione ha senso esclusivamente se lavoriamo con altri file CSS indipendenti dal framework, e che potrebbero entrare in conflitto.
La stringa separator contiene il separatore tra le varianti e le classi utility. Di default, è uguale a due punti (:) e anche in questo caso ha senso modificarlo solo in caso di conflitti.
Infine, la sezione corePlugins permette di disattivare eventuali classi generate di default dal framework, con l'unico scopo di alleggerire il pacchetto compilato.