Tailwind CSS: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m rimossa Categoria:Framework per applicazioni web usando HotCat |
Funzionalità collegamenti suggeriti: 3 collegamenti inseriti. |
||
| (6 versioni intermedie di un altro utente non mostrate) | |||
Riga 2:
|Nome = Tailwind CSS
|Sviluppatore = Adam Wathan, Jonathan Reinink, David Hemphill, e Steve Schoger
|Linguaggio = CSS
|Linguaggio2 =
Riga 27 ⟶ 26:
l concetto di ''utility-first'' rappresenta la caratteristica principale di Tailwind CSS.<ref>{{Cita web|lingua=en|url=https://tailwindcss.com/docs/utility-first|sito=tailwindcss.com}}</ref> 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 [[Tipo di carattere|tipi di carattere]], layout, ombre e molto altro, offrendo un controllo dettagliato e flessibile sullo stile degli elementi.
{| class="wikitable"
|+Esempio: avviso giallo
Riga 61 ⟶ 60:
=== Varianti ===
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 [[Design responsivo|interfacce reattive]] adatte a diverse dimensioni dello schermo.<ref>{{Cita web|lingua=en|url=https://tailwindcss.com/docs/responsive-design|sito=tailwindcss.com}}</ref> Inoltre, esistono varianti dedicate ai diversi stati di un elemento, come <code>hover:</code> per quando il cursore passa sopra, <code>focus:</code> per quando è selezionato tramite [[Tastiera (informatica)|tastiera]], o <code>active:</code> per quando l'elemento è attivo<ref>{{Cita web|lingua=en|url=https://tailwindcss.com/docs/hover-focus-and-other-states|sito=tailwindcss.com}}</ref>È possibile utilizzare anche varianti che rispondono a impostazioni del browser o del sistema operativo, come la modalità scura abilitata.<ref>{{Cita web|lingua=en|url=https://tailwindcss.com/docs/dark-mode|sito=tailwindcss.com}}</ref>
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 <code>md:bg-yellow-400</code> applicherà la classe <code>bg-yellow-400</code> solo se la dimensione dello schermo raggiunge o supera il valore definito per <code>md</code> (medio). Questo approccio consente di adattare lo stile degli elementi in base a criteri specifici, come le dimensioni dello schermo o altri stati.
Riga 68 ⟶ 67:
=== Impostazioni e temi ===
Le classi di utilità e le varianti offerte da Tailwind CSS possono essere personalizzate attraverso un [[file di configurazione]], generalmente chiamato <code>tailwind.config.js</code>. 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 ====
Riga 76 ⟶ 75:
==== Modalità just-in-time ====
La modalità ''JIT'' (''[[Compilatore just-in-time|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.
Riga 97 ⟶ 96:
{{Portale|informatica|Internet}}
[[Categoria:CSS]]
▲[[Categoria:Software multipiattaforma]]
| |||