Sviluppo web

Che cos'è Tailwind CSS

Tailwind CSS è un framework utility-first: classi nel markup e un file CSS generato dalla build. Ecco cosa fa, cosa non fa e quanto costa in pratica.

In sintesi

  • Tailwind CSS è un framework utility-first, non una libreria di componenti.
  • La build genera solo il CSS delle classi usate: non c'è runtime nel browser.
  • Comportamento e accessibilità restano fuori: servono primitive headless e test da tastiera.

Tailwind CSS è un framework CSS utility-first: scrivi classi come flex, gap-4 e text-sm nel markup, e la build genera solo il CSS che quelle classi usano. Non è una libreria di componenti e non porta JavaScript nel browser.

Come funziona

Non c'è un runtime e non ci sono stili inline: un passaggio di build legge il codice sorgente, trova le classi usate e scrive un file CSS. Tailwind CSS 4 usa una configurazione nel CSS, con @import "tailwindcss", invece del vecchio tailwind.config.js obbligatorio. Fonte: documentazione tailwindcss.com, letta il 1 novembre 2026.

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

Il file src/input.css deve contenere @import "tailwindcss";. Il comando richiede Node e crea dist/output.css; --watch lo rigenera a ogni modifica.

Cosa non è

Non è una component library: non consegna bottoni, dialog o menu accessibili. Non è Bootstrap: non impone una griglia a 12 colonne né un tema. Non è CSS-in-JS: le classi vivono nell'HTML, non in oggetti JavaScript.

Perché i team lo scelgono

  • Spaziatura, colori e tipografia vengono da token dichiarati una volta, non da valori copiati a mano.
  • Il CSS non usato non arriva al browser: la build scrive solo le classi presenti nel codice.
  • Le stesse classi funzionano in React, Vue, Svelte e HTML statico, senza riscrivere il foglio di stile.
  • Fonte: documentazione tailwindcss.com e licenza MIT del repository, letti il 1 novembre 2026.

Quanto costa

Le stringhe di classi diventano lunghe e vanno lette come codice. Serve un passaggio di build, e le classi costruite dinamicamente vanno dichiarate in una safelist o ricondotte a valori completi. La licenza MIT non ha costi, ma la manutenzione del markup resta un costo del team.

La limitazione

Tailwind non aggiunge comportamento né semantica. Un div con classi resta un div: focus, tastiera, ruoli ARIA e stati di errore restano tuoi. Per quelli servono primitive headless, per esempio Radix UI o Base UI, entrambe MIT, più test manuali da tastiera.

Dove continuare

Nel catalogo EneUI trovi 1.556 blocchi e 111.985 componenti; il record hero-01 di shadcn/ui blocks è una sezione costruita con classi Tailwind, da leggere prima di copiarla. Se una classe non viene applicata leggi content paths; per i calcoli con le variabili calc() e CSS variables; il confronto tra approcci è in copy-paste o headless.

Domande frequenti

Tailwind CSS è un framework o una libreria?

È un framework CSS utility-first. Non è una libreria di componenti: fornisce classi atomiche, non bottoni o dialog pronti con comportamento accessibile.

Serve JavaScript nel browser per usarlo?

No. Tailwind genera un file CSS in build e non invia runtime al browser. Il JavaScript che usi è quello del tuo framework, non di Tailwind.

Posso usarlo senza un passaggio di build?

Per una prova sì, con il Play CDN, che però Tailwind sconsiglia in produzione. Per un sito reale serve la build, perché il CDN genera il CSS nel browser e peggiora i tempi di caricamento.

È gratis?

Sì. Il codice di Tailwind CSS è distribuito con licenza MIT e non richiede un account. Tailwind Plus è un prodotto separato e a pagamento, ma non serve per usare il framework.

Funziona con React e Next.js?

Sì. Le classi sono stringhe nel markup, quindi funzionano con React, Next.js, Vue e Svelte. L'integrazione cambia solo nel passaggio di build, non nel modo in cui scrivi i componenti.