CONTATTACI

Blog

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!

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.