Tailwind vs CSS Modules: dove vive la scala del design

Tailwind e CSS Modules non sono alternative: uno genera utility, l’altro isola i fogli di stile. La scelta vera è dove vive la scala di spaziatura e tipografia, e chi la controlla quando il progetto cresce.

Il divario di adozione è netto: al 1 novembre 2026 il tag `tailwind-css` conta 10.551 domande su Stack Overflow e `css-modules` 740, quattordici volte meno. La domanda più votata su CSS Modules, misurata sulla stessa API, ha 273 voti e riguarda TypeScript che non trova il modulo.

Due problemi, non due soluzioni

Dove finisce il valore

Tailwind mette la scala in un solo posto: spaziatura, tipografia, colori e breakpoint diventano variabili di configurazione. Chi scrive un componente non inventa un `margin`, sceglie un valore della scala. CSS Modules non offre questa garanzia: il nome è locale, il valore è libero.

Con CSS Modules la coerenza dipende dalle convenzioni e dalla review. Un file può definire `padding: 13px` senza che nessuno lo noti. Con Tailwind `p-3` esiste solo se la scala lo prevede, e un valore fuori scala si vede nel markup.

Il test in un’ora

# quanti fogli CSS Modules ha il progetto
rg -n "\.module\.css" src | wc -l

# quanto CSS produce Tailwind dopo il tree-shaking
npx @tailwindcss/cli -i ./src/app.css -o ./dist/app.css --minify
wc -c ./dist/app.css

# la scala esiste una volta sola?
rg -n -- "--space-|--text-" src/app.css

Il secondo numero va letto insieme al primo: se il CSS generato cresce mentre i fogli CSS Modules restano, avete due sistemi che si sommano. Se il numero resta basso e i fogli calano, la migrazione sta funzionando.

La combinazione che funziona

Tailwind per layout, spaziatura e stati; CSS Modules per le parti che hanno bisogno di CSS vero: keyframe complessi, gradienti multipli, selettori di stato che le utility rendono illeggibili. Il confine va scelto una volta e scritto, altrimenti ogni sviluppatore decide per sé.

Il limite da mettere per iscritto

Limite dichiarato di CSS Modules: non porta token né scala. La coerenza resta una convenzione, e la tipizzazione richiede una dichiarazione per `*.module.css` che TypeScript non genera da solo. È il motivo della domanda più votata sul tag: 273 voti per un errore di configurazione, non di stile.

Licenze e dipendenze

Tailwind è MIT. CSS Modules non è un runtime: è una specifica implementata dal bundler o da `postcss-modules`, quindi non aggiunge una licenza da valutare. In entrambi i casi la decisione riguarda il processo di build, non il contratto legale.

Le utility si esplorano in /components/cat/tailwind, i componenti con CSS dichiarato in /components/cat/css e il modello copy-paste in /components/lib/shadcn. Per il modello delle utility leggi che cos’è Tailwind CSS, per i token come tematizzare shadcn; il confronto tra framework CSS è in Tailwind vs Bootstrap.