Che cos’è Tailwind CSS

Il linguaggio CSS rappresenta un pilastro dello sviluppo front end. Ad oggi, chiunque aspiri a diventare web developer, deve necessariamente imparare CSS ed avere dimestichezza con esso.

 

CSS cos è?

Si tratta di un linguaggio utilizzato per definire i cosiddetti fogli di stile. Permette di dare un’identità ben precisa all’estetica della pagina web, personalizzando il layout, i font, le immagini, gli effetti, la struttura e tanto altro e “collabora” con il linguaggio HTML.

Lo sviluppo front end ha subito negli anni una costante evoluzione, anche grazie ai programmatori stessi che hanno supportato e supportano questa pratica attraverso strumenti opensource, framework front end e librerie CSS. 

Tra i più diffusi possiamo citare Bootstrap framework o w3.css. Di recente, sta spopolando un framework CSS open source chiamato Tailwind CSS. Nato nel 2021, si propone come alternativa ai framework tradizionali e si contraddistingue per un approccio non basato su classi che realizzano elementi già preconfezionati, ma sfruttando una lista di utility classi CSS che permettono di implementare il proprio stile direttamente su una pagina HTML. 

Tailwind offre la possibilità di applicare una utility class solo in alcune situazioni tramite media query, chiamate varianti. L’uso principale delle varianti è progettare un’interfaccia reattiva per schermi di varie dimensioni. Ci sono anche varianti per i diversi stati che un elemento può avere, come hover: per quando la freccetta del mouse passa sopra un elemento o una scritta, focus: quando la tastiera è selezionata o active: quando è in uso o quando il browser o il sistema operativo ha la modalità dark abilitata.

Le varianti sono composte da due parti: la condizione da soddisfare e la classe che viene applicata se la condizione è soddisfatta. Ad esempio, la variante md:bg-yellow-400 applicherà la classe bg-yellow-400 se la dimensione dello schermo è maggiore del valore definito per md.

Tailwind CSS è sviluppato utilizzando il linguaggio javascript, viene eseguito tramite Node.js e si installa con gestori di pacchetti ambientali come npm o yarn. Quindi, non ha bisogno di un ambiente dedicato per essere avviato, è visibile direttamente su browser. 

Secondo il creatore del framework CSS, Tailwind fornisce tutti i building blocks per implementare il proprio design senza impelagarsi con l’override di stili già preconfezionati. Tailwind CSS rispetto ai framework tradizionali permette di dare il proprio stile agli elementi del front end senza dover modificare il design preimpostato su di essi.

Il concetto di utility class prima si riferisce alla principale caratteristica di differenziazione di Tailwind. Invece di creare classi attorno a componenti (pulsanti, pannelli, menu, caselle di testo…), le classi sono costruite attorno a un elemento di stile specifico (colore giallo, carattere in grassetto, testo molto grande, elemento centrale…). Ognuna di queste classi è chiamata classi di utilità (utility class).

Esistono molte classi di utilità in Tailwind CSS che consentono di controllare un gran numero di proprietà CSS come colori, bordo, tipo di visualizzazione (display), dimensione e font del carattere, layout, ombra…

Fornisce un grande vantaggio per lo sviluppatore perché semplifica la pratica di personalizzazione attraverso il linguaggio CSS, andando ad aumentare la produttività, potendo personalizzare il design della pagina web, direttamente attraverso lo stile e non prendendo singolarmente l’elemento da voler personalizzare (navbar, bottone, menu…).

Deve ancora ritagliarsi una fetta importante di popolarità tra gli sviluppatori (rispetto ai già citati Bootstrap framework e w3.css), ma si tratta di uno strumento molto efficace per migliorare la produttività in termini di risorse e tempistiche.

Se lo conoscevi già, non perderti l’occasione di fare un parallelismo tra Tailwind CSS e Bootstrap! Noi, dal canto nostro, ti diamo anche un piccolo aiuto: corri a leggere la nostra guida Bootstrap in italiano!