Tailwind CSS
| Tailwind CSS software | |
|---|---|
 | |
| Genere | Framework per applicazioni web |
| Sviluppatore | Adam Wathan, Jonathan Reinink, David Hemphill, e Steve Schoger |
| Data prima versione | 13 maggio 2019 |
| Ultima versione | 4.1.4 (14 aprile 2025) |
| Sistema operativo | Multipiattaforma |
| Linguaggio | CSS |
| Licenza | licenza MIT (licenza libera) |
| Sito web | tailwindcss.com/ |
Tailwind CSS è un framework CSS open source che si distingue da altri framework come Bootstrap: anziché offrire una serie di classi predefinite per elementi specifici come pulsanti o tabelle, Tailwind mette a disposizione un ampio elenco di classi CSS "di utilità". Queste classi possono essere combinate e personalizzate per definire lo stile di ogni elemento in modo flessibile e modulare.
Al 5 agosto 2024, Tailwind CSS ha oltre 81.000 stelle su GitHub.[1]
Caratteristiche
[modifica | modifica wikitesto]A causa delle differenze nei concetti di base rispetto ad altri framework CSS tradizionali come Bootstrap, è importante conoscere la filosofia da cui è stato creato Tailwind, nonché il suo utilizzo di base.
Utility classes
[modifica | modifica wikitesto]l concetto di utility-first rappresenta la caratteristica principale di Tailwind CSS.[2] Questo approccio si differenzia dal tradizionale metodo basato sui componenti (come pulsante, pannello, menu, casella di testo...) e si concentra sulla definizione di classi basate su specifici elementi di stile (ad esempio, colore giallo, carattere in grassetto, testo molto grande, centratura di un elemento). Ciascuna di queste classi, nota come utility class, è progettata per applicare una singola proprietà di stile in modo rapido e preciso.
In Tailwind CSS è disponibile un'ampia gamma di classi di utilità che permettono di gestire numerose proprietà CSS. Queste includono, tra le altre, colori, bordi, tipo di visualizzazione (display), dimensioni e tipi di carattere, layout, ombre e molto altro, offrendo un controllo dettagliato e flessibile sullo stile degli elementi.
| Risultato | 
| |
|---|---|---|
| Codice | <div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
<p>Please be careful when feeding the birds.</p>
</div>
| |
| Classi | Tailwind | CSS |
m-4
|
margin: 1rem;
| |
p-4
|
padding: 1rem;
| |
bg-yellow-200
|
background-color: rgb(254 240 138);
| |
font-bold
|
font-weight: 700;
| |
rounded-lg
|
border-radius: 0.5rem;
| |
Varianti
[modifica | modifica wikitesto]Tailwind CSS permette di applicare una utility class in situazioni specifiche utilizzando le media queries, un approccio noto come variante. Le varianti sono particolarmente utili per progettare interfacce reattive adatte a diverse dimensioni dello schermo.[3] Inoltre, esistono varianti dedicate ai diversi stati di un elemento, come hover: per quando il cursore passa sopra, focus: per quando è selezionato tramite tastiera, o active: per quando l'elemento è attivo[4]È possibile utilizzare anche varianti che rispondono a impostazioni del browser o del sistema operativo, come la modalità scura abilitata.[5]
Le varianti in Tailwind CSS si compongono di due elementi: la condizione da soddisfare e la classe da applicare quando tale condizione è rispettata. Ad esempio, la variante md:bg-yellow-400 applicherà la classe bg-yellow-400 solo se la dimensione dello schermo raggiunge o supera il valore definito per md (medio). Questo approccio consente di adattare lo stile degli elementi in base a criteri specifici, come le dimensioni dello schermo o altri stati.
Tailwind CSS è sviluppato utilizzando JavaScript, viene eseguito tramite Node.js e si installa con i gestori di pacchetti come npm o yarn.[6]
Impostazioni e temi
[modifica | modifica wikitesto]Le classi di utilità e le varianti offerte da Tailwind CSS possono essere personalizzate attraverso un file di configurazione, generalmente chiamato tailwind.config.js. In questo file è possibile definire e modificare i valori delle classi di utilità, come la tavolozza dei colori, le dimensioni dei margini, gli spazi tra gli elementi e molte altre proprietà, consentendo una configurazione flessibile e adattata alle esigenze del progetto.
Costruisci tutto e ripulisci
[modifica | modifica wikitesto]La modalità predefinita di Tailwind CSS prevede la generazione di tutte le possibili combinazioni CSS basate sulle impostazioni del progetto. Successivamente, tramite un'utility come PurgeCSS, i file del progetto vengono analizzati per individuare le classi effettivamente utilizzate. Le classi inutilizzate vengono quindi rimosse, producendo un file CSS finale ottimizzato e più leggero. Questo processo garantisce prestazioni migliori senza compromettere la flessibilità nella definizione degli stili.
A causa dell'elevato numero di classi generate dalle varianti e dalle loro combinazioni, il metodo utilizzato nelle versioni precedenti di Tailwind CSS poteva causare tempi di attesa prolungati e la creazione di file CSS molto grandi prima della fase di ottimizzazione. Tuttavia, a partire dalla versione 3 di Tailwind CSS, questo approccio è stato sostituito con un sistema di generazione delle classi on-demand. Questo nuovo sistema produce solo le classi effettivamente utilizzate nei file del progetto, migliorando significativamente le prestazioni e riducendo la complessità del processo.[7]
Modalità just-in-time
[modifica | modifica wikitesto]La modalità JIT (Just-In-Time) è un approccio avanzato introdotto in Tailwind CSS per generare il CSS in modo più efficiente. A differenza del metodo tradizionale, che genera tutte le possibili classi per poi rimuovere quelle inutilizzate, la modalità JIT analizza in tempo reale il contenuto dei file HTML (o di altre estensioni e percorsi configurati) e genera immediatamente solo le classi effettivamente necessarie. Questo sistema riduce drasticamente la dimensione del file CSS e migliora la velocità di sviluppo, permettendo un feedback più rapido durante il lavoro.
Generando esclusivamente il CSS necessario, la modalità JIT riduce significativamente la dimensione del file CSS. Questo miglioramento tecnico ha permesso di introdurre numerose nuove varianti e classi di utilità, ampliando le possibilità di personalizzazione. Inoltre, la modalità JIT consente di creare classi di utilità al volo con valori arbitrari non predefiniti nella configurazione, offrendo maggiore flessibilità e un controllo più dettagliato sugli stili direttamente nel codice.
Versioni
[modifica | modifica wikitesto]Tailwind CSS utilizza il versioning semantico per identificare la compatibilità della versione.
Note
[modifica | modifica wikitesto]- ^ https://github.com/tailwindlabs/tailwindcss.
- ^ (EN) tailwindcss.com, https://tailwindcss.com/docs/utility-first.
- ^ (EN) tailwindcss.com, https://tailwindcss.com/docs/responsive-design.
- ^ (EN) tailwindcss.com, https://tailwindcss.com/docs/hover-focus-and-other-states.
- ^ (EN) tailwindcss.com, https://tailwindcss.com/docs/dark-mode.
- ^ (EN) tailwindcss.com, https://tailwindcss.com/docs/installation.
- ^ (EN) GitHub, https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1.
Voci correlate
[modifica | modifica wikitesto]Collegamenti esterni
[modifica | modifica wikitesto]- (EN) Sito ufficiale, su tailwindcss.com.
- (EN) Blog ufficiale, su tailwindcss.com.
- (EN) Tailwind CSS / Tailwind Labs, su GitHub.
- Repository sorgenti di Tailwind CSS, su github.com.
