Tailwind CSS: perché lo uso in quasi tutti i miei progetti

Ci sono strumenti che uso per abitudine e altri che uso perché mi hanno semplificato la vita. Tailwind CSS è nella seconda categoria: lo adoro, e lo adopero in quasi tutti i progetti nuovi, compreso questo sito. In questo articolo ti spiego che cos'è, perché mi convince e, con la stessa franchezza, dove non è la scelta giusta. Non serve essere programmatori per seguirlo: ti basta sapere che il CSS è il linguaggio che decide l'aspetto di una pagina, cioè colori, spazi, caratteri e disposizione.

Che cos'è Tailwind CSS

Nel CSS tradizionale si inventano dei nomi (per esempio .scheda-prodotto), si scrive in un file a parte come deve apparire quel nome e poi si applica il nome al pezzo di pagina. Funziona, ma col tempo i file di stile crescono, i nomi si moltiplicano e nessuno ricorda più cosa si può toccare senza rompere qualcosa altrove.

Tailwind ribalta l'approccio. Mette a disposizione tante piccole classi, ciascuna con un solo compito: una per lo spazio interno, una per il colore del testo, una per l'arrotondamento degli angoli. Le combini direttamente sull'elemento, e lo stile si legge lì dove serve. Non c'è un componente pre-disegnato: il disegno lo fai tu, mattoncino dopo mattoncino.

È una scelta che al primo sguardo sembra caotica e che in pratica, dopo qualche giorno, diventa difficile da abbandonare.

Perché lo uso

Si lavora più in fretta

Non devo inventare nomi né saltare tra due file per capire cosa fa un pezzo di pagina. Costruisco e vedo subito il risultato. Su un progetto con molte pagine, questo si traduce in meno ore di sviluppo e meno tempo speso a rincorrere dettagli di stile.

Il CSS smette di crescere

Con il CSS classico, ogni nuova pagina rischia di aggiungere altre regole e altre eccezioni. Con Tailwind si riutilizza sempre lo stesso vocabolario, quindi il peso dello stile resta stabile anche quando il sito cresce. In più, nella versione pubblicata finisce soltanto ciò che è stato davvero usato: il file è piccolo, e questo aiuta la velocità, di cui parlo anche nella guida ai Core Web Vitals.

Il design resta coerente

Colori, spazi, dimensioni dei caratteri e punti di rottura per telefono e tablet sono definiti una volta sola, in un unico punto di configurazione. Da lì in poi tutto il sito attinge allo stesso sistema: niente un blu leggermente diverso per ogni pagina, niente margini a occhio. Se il progetto parte da un file Figma, i valori del progetto grafico diventano il vocabolario del sito.

Modificare è sicuro

Una classe riguarda l'elemento su cui è scritta, non altri. Cambiare l'aspetto di un bottone non fa saltare per aria una pagina lontana. Per chi eredita il sito, o per un'agenzia che mi affida una parte del lavoro, è una garanzia concreta: si interviene dove serve, senza effetti collaterali.

Responsive e tema chiaro/scuro quasi gratis

Indicare come cambia un elemento su schermo piccolo, medio o grande, o nel tema scuro, richiede una manciata di caratteri accanto alla classe base. Questo rende più semplice curare l'aspetto su ogni dispositivo, che oggi è il punto di partenza di qualunque sito e non un extra.

La versione 4: più semplice di prima

L'ultima versione ha un motore nuovo, più rapido, e una configurazione che si scrive direttamente nel CSS invece che in un file JavaScript separato. Per me significa meno configurazione e meno strumenti da mantenere. Si integra bene con Vite, lo strumento che prepara il sito in Nuxt, con un plugin dedicato. È la combinazione che uso qui: Nuxt per la struttura, Tailwind per l'aspetto.

I limiti, senza girarci intorno

Nessuno strumento è perfetto, e Tailwind ha i suoi lati meno comodi:

• Il codice HTML si riempie di classi. All'inizio spaventa. Si risolve spezzando la pagina in componenti, in modo che una stessa combinazione di classi sia scritta una volta sola.
• Richiede di conoscere il CSS. Tailwind non lo sostituisce: lo rende più veloce da scrivere. Chi non sa cos'è un margine o una griglia non ci arriva con Tailwind.
• Non è adatto a tutto. Nei siti WordPress costruiti con page builder, o con temi già pronti, non c'è modo né ragione di introdurlo. Ha senso soprattutto in progetti costruiti da zero, come un tema su misura o un sito con Nuxt.
• Per i contenuti lunghi serve un'accortezza. Il testo di un articolo, generato da un editor, non ha classi: si gestisce con un piccolo insieme di regole dedicato, che ci sono nell'ecosistema di Tailwind.

Cosa cambia per chi commissiona un sito

Non devi sapere cos'è Tailwind per beneficiarne, ma le conseguenze si vedono:

1. Pagine più leggere, e quindi più veloci da caricare, soprattutto da telefono.
2. Aspetto uniforme su tutto il sito, perché ogni pagina usa gli stessi colori e le stesse misure.
3. Manutenzione più semplice: modificare un dettaglio non diventa un'impresa, e chi arriva dopo di me capisce subito il codice.
4. Preventivi più realistici, perché la parte grafica non si trascina dietro ore di aggiustamenti imprevisti.

Se sei un'agenzia, c'è un vantaggio in più: ricevi codice che i tuoi sviluppatori leggono senza dover decifrare una convenzione inventata da me, perché Tailwind è uno standard ormai molto diffuso.

Quando non lo consiglio

Se il sito è un WordPress costruito con un tema pronto e va bene così, non ha senso rifare tutto per usare Tailwind. Vale lo stesso per un piccolo ritocco a un sito esistente scritto in CSS tradizionale: meglio rispettare ciò che c'è. Uno strumento va scelto per il progetto, non per la moda, e a volte la risposta più onesta è «lascia com'è».

Perché affidarlo a me

Programmo dal 1999, con più di 300 progetti consegnati e circa 30 agenzie come sviluppatore esterno. Ho visto passare molti modi di scrivere CSS, e Tailwind è quello che oggi mi dà il miglior equilibrio tra velocità, ordine e prestazioni. Lo uso insieme a Nuxt e Vue per siti veloci e facili da far evolvere, e traduco i tuoi progetti grafici in pagine fedeli al disegno su ogni schermo.

Se hai un progetto da impostare bene, o un sito che vuoi rendere più rapido e ordinato, scrivimi: una chiacchierata di circa 20 minuti, senza impegno, e poi una proposta scritta e gratuita. Il servizio è in Creazione siti web.