# 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.

> Pagina: https://ui.eneawork.it/blog/che-cose-tailwind-css
> Markdown: https://ui.eneawork.it/blog/che-cose-tailwind-css.md

*2026-11-01*

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.

La domanda «How to add a @tailwind CSS rule to CSS checker» vale 386 voti su Stack Overflow, letta il 31 ottobre 2026 con la Stack Exchange API e registrata in docs/keyword-data.json. Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati e letti da /api/stats il 1 novembre 2026. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## 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

## 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.

## FAQ

### 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.