Tailwind CSS

Tailwind CSS è un framework CSS utility-first che dà stile alla pagina con piccole classi a scopo singolo scritte direttamente nell'HTML. Classi come p-4, text-center e bg-blue-500 impostano ciascuna un solo stile. Gli sviluppatori le combinano per costruire qualsiasi design senza scrivere molto CSS personalizzato.

CSS utility-first significa costruire un design con tante piccole classi che fanno ciascuna una sola cosa, invece di scrivere una classe personalizzata per ogni componente. Un pulsante prende il suo aspetto da classi per padding, colore, arrotondamento dei bordi e peso del font. Questo approccio tiene gli stili vicino al markup ed evita fogli di stile enormi che continuano a crescere.

Gli sviluppatori scelgono Tailwind CSS perché velocizza lo styling e mantiene leggero il file CSS finale. Non serve inventare nomi di classi né passare tra file HTML e CSS a ogni modifica. Tailwind CSS offre anche una scala coerente per spaziature, colori e dimensioni dei font, che mantiene ordinato il design.

Tailwind CSS offre classi di utilità di basso livello per costruire un design personalizzato, mentre Bootstrap offre componenti pronti come navbar, card e finestre modali. Bootstrap è più rapido per un aspetto standard con poco lavoro di design. Tailwind CSS è meglio quando un progetto ha bisogno di un design unico senza combattere con un tema predefinito.

Tailwind CSS si installa tramite npm e si collega allo strumento di build del progetto, come Vite, PostCSS o la Tailwind CLI. In Tailwind CSS versione 4 si aggiunge il pacchetto e poi lo si importa in cima al file CSS principale con @import "tailwindcss". La guida ufficiale di installazione ha passaggi brevi per ogni framework diffuso, tra cui Laravel, Next.js e Vite.

Tailwind CSS va bene per i principianti che capiscono già le proprietà CSS di base come margin, padding, flexbox e grid. Ogni classe di Tailwind corrisponde a una vera proprietà CSS, quindi imparare prima il CSS rende le classi facili da leggere. I principianti che saltano le basi del CSS spesso faticano a sistemare i layout in Tailwind CSS.

La maggior parte degli sviluppatori che conosce il CSS diventa produttiva con Tailwind CSS in pochi giorni. I nomi delle classi seguono schemi chiari, quindi imparare un gruppo di classi aiuta a indovinare le altre. Padroneggiare varianti responsive, temi personalizzati e schemi di componenti richiede qualche settimana di uso reale.

Il design responsive in Tailwind CSS funziona aggiungendo prefissi di breakpoint come sm:, md: e lg: davanti a qualsiasi classe di utilità. Tailwind CSS è mobile-first, quindi una classe senza prefisso vale per tutti gli schermi e una con prefisso vale da quel breakpoint in su. Per esempio text-sm md:text-lg dà testo piccolo sui telefoni e più grande sugli schermi larghi.

I breakpoint predefiniti di Tailwind CSS sono sm a 640 pixel, md a 768 pixel, lg a 1024 pixel, xl a 1280 pixel e 2xl a 1536 pixel. Ogni breakpoint è una larghezza minima, coerente con l'approccio mobile-first di Tailwind. Un progetto può cambiare questi valori o aggiungere nuovi breakpoint nelle impostazioni del tema.

La modalità scura in Tailwind CSS si aggiunge mettendo il prefisso dark: davanti a qualsiasi classe, per esempio dark:bg-gray-900. Per impostazione predefinita Tailwind CSS segue l'impostazione del sistema operativo del visitatore. Per permettere agli utenti di cambiare modalità con un pulsante, si configura la variante dark in modo che dipenda da una classe o da un attributo data della pagina.

In Tailwind CSS versione 4 colori e font si personalizzano con variabili CSS dentro un blocco @theme nel file CSS principale. Una variabile come --color-brand crea in automatico classi come bg-brand e text-brand. Le versioni precedenti usavano un file tailwind.config.js per lo stesso scopo, e questo approccio funziona ancora nella versione 4 tramite un'opzione di compatibilità.

Tailwind CSS può rendere l'HTML affollato, perché un elemento può avere molte classi. La maggior parte dei team risolve trasformando gli schemi ripetuti in componenti del proprio framework, come un componente Blade, React o Vue. Il compromesso è che gli stili restano visibili accanto al markup, e questo rende le modifiche rapide e sicure.

Tailwind CSS mantiene leggero il file CSS analizzando i file del progetto e generando solo le classi effettivamente usate. Le utilità non usate non arrivano mai nel foglio di stile finale. Un tipico file CSS di produzione costruito con Tailwind CSS è piccolo, anche per siti grandi.

La direttiva @apply in Tailwind CSS permette di usare le classi di utilità di Tailwind dentro le proprie regole CSS. È comoda per dare stile a contenuti che non controlli, come l'HTML prodotto da un editor di testo. Il team di Tailwind consiglia di usarla con moderazione, perché i componenti sono di solito un modo più pulito per riusare gli stili.

Sì, Tailwind CSS funziona bene con Laravel, e i nuovi progetti Laravel sono già configurati per usarlo con Vite. Le classi Tailwind si scrivono nei template Blade e Vite genera il CSS finale. Anche gli starter kit di Laravel usano Tailwind CSS per le schermate di accesso e la dashboard.

Sì, Tailwind CSS funziona con React, Vue, Svelte e la maggior parte degli altri framework JavaScript. Le classi vanno nel markup del componente tramite className in React o class in Vue. Dato che ogni componente contiene le proprie classi, Tailwind CSS si adatta bene ai framework basati su componenti.

Tailwind CSS non ha effetti diretti sul posizionamento, ma può aiutare la SEO in modo indiretto mantenendo leggero il file CSS e veloci le pagine. La velocità della pagina fa parte dei segnali di esperienza sulla pagina di Google. Contenuti, struttura della pagina e semantica HTML contano comunque molto più dello strumento usato per lo stile.

I valori arbitrari in Tailwind CSS permettono di usare un valore esatto che non è nel tema scrivendolo tra parentesi quadre. Per esempio w-[37%] o top-[117px] creano al volo una classe con quel valore esatto. Sono utili per i casi isolati, ma un valore usato spesso va inserito nel tema.

Gli stati hover e focus in Tailwind CSS funzionano aggiungendo un prefisso di stato come hover:, focus: o active: prima di una classe di utilità. Per esempio bg-blue-500 hover:bg-blue-600 scurisce un pulsante quando il mouse ci passa sopra. I prefissi si possono combinare con i breakpoint e la modalità scura, come in md:hover:underline.

No, Tailwind CSS in sé include solo classi di utilità, non componenti pronti come finestre modali o navbar. I componenti pronti arrivano da raccolte separate, come la Tailwind Plus ufficiale o librerie della comunità come daisyUI e Flowbite. Molti team costruiscono un proprio piccolo set di componenti sopra le utilità.

Sì, Tailwind CSS supporta i layout da destra a sinistra tramite le varianti rtl: e ltr: e le classi di utilità logiche. Classi logiche come ms-4 e pe-2 impostano margine e padding all'inizio o alla fine della riga, quindi si invertono in automatico in arabo. Così un solo markup funziona sia per le pagine in inglese sia per quelle in arabo.

Tailwind CSS versione 4 ha spostato la configurazione nel CSS con il blocco @theme e un'unica riga @import. La versione 4 ha portato anche un motore di build più veloce, il rilevamento automatico dei file di contenuto e funzioni CSS moderne come i cascade layer. La maggior parte dei progetti che passano dalla versione 3 può usare lo strumento ufficiale di aggiornamento per adeguare il codice.

Tailwind CSS può non convenire quando un progetto ha bisogno di un set completo di componenti pronti con pochissimo design personalizzato, o quando il team preferisce scrivere CSS classico. Una piccola pagina statica con pochi stili può non aver bisogno di alcun framework. Tailwind CSS rende al massimo nei progetti con design personalizzati che continuano a crescere.

Le classi di Tailwind CSS restano ordinate trasformando gli schemi ripetuti in componenti e disponendo le classi in un ordine coerente. Il plugin ufficiale di Prettier per Tailwind CSS ordina le classi in automatico al salvataggio. Definire nel tema i colori del marchio e le spaziature mantiene anche le classi brevi e coerenti.

Sì, Tailwind CSS è open source con licenza MIT, quindi si può usare in progetti personali e commerciali. La licenza consente di usare, modificare e distribuire Tailwind CSS in qualsiasi prodotto. Il codice sorgente è pubblico su GitHub, dove chiunque può leggerlo e segnalare problemi.