# Migrating from Bootstrap to Tailwind without rewriting the site

Tailwind arrives beside Bootstrap and replaces it one page at a time: three phases, what converts mechanically, what needs rewriting, and the limits.

> Page: https://ui.eneawork.it/blog/migrare-bootstrap-a-tailwind
> Markdown: https://ui.eneawork.it/blog/migrare-bootstrap-a-tailwind.md

*2026-11-01*

Si migra da Bootstrap a Tailwind in tre fasi, non con un big bang: Tailwind entra accanto a Bootstrap, una pagina alla volta, e Bootstrap esce quando l’ultima pagina è convertita. Il sito resta online in ogni fase, ma per un periodo paga due sistemi di stile.

Bootstrap è una libreria completa: griglia, utility, componenti e JavaScript. Tailwind è un generatore di utility: non porta componenti né comportamento. La migrazione non è un cambio di sintassi, è la rinuncia a una parte che qualcuno deve riscrivere.

## Le tre fasi

## Cosa converte bene e cosa no

Il 1 novembre 2026 `/api/stats` restituisce 111.985 componenti, 1.556 blocchi, 12.808 icone e 1.472 librerie; il record Bootstrap del catalogo elenca 13 file sorgente JavaScript. Il 31 ottobre 2026 l’API Stack Exchange, interrogata con `/2.3/questions?order=desc&sort=votes&tagged=responsive-design`, riporta 17.420 domande con tag `responsive-design` e 602 voti sulla domanda più votata sulle colonne Bootstrap. Il tag `tailwind-css` ha 10.551 domande.

## La configurazione che evita il conflitto

Due sistemi di utility nello stesso documento si sovrascrivono. Bootstrap definisce `.container`, `.border`, `.shadow` e `.rounded`; Tailwind definisce classi con gli stessi nomi. Il prefisso non è eleganza: è l’unico modo per non fare debug su un bottone che cambia bordo da solo.

Con Tailwind 4 il prefisso si dichiara nell’import del CSS. Se togli anche Preflight, Bootstrap mantiene i suoi reset e Tailwind non riscrive `margin`, `border` e `font-size` su ogni elemento.

npm install tailwindcss @tailwindcss/postcss postcss # build una volta, poi --watch durante la conversione npx @tailwindcss/cli -i ./src/app.css -o ./public/app.css # quante pagine usano ancora una classe Bootstrap rg -l "btn |card |navbar |modal |col-" src | wc -l

La terza riga è il cruscotto: il numero deve scendere a ogni pagina convertita. Quando arriva a zero, Bootstrap può uscire.

## La pagina da cui partire

Scegli una pagina statica con un form e nessun modal. La pagina contatti è il test migliore: griglia, campi, validazione e messaggi di errore. Se il risultato regge il confronto visivo e il form funziona, la mappa è pronta per le altre.

## Il limite da mettere per iscritto

Limite dichiarato: Tailwind non porta componenti JavaScript. Chi usa modal, dropdown e tooltip di Bootstrap deve riscriverli su primitive headless, e quel lavoro non è incluso nella conversione delle classi. Se il sito dipende da cinque plugin, la migrazione costa più della parte CSS.

Le licenze sono semplici: Bootstrap è MIT, Tailwind è MIT, Radix e Base UI sono MIT. La licenza non decide la migrazione; la decide quanto JavaScript usi.

Il record di partenza è /components/lib/bootstrap, l’arrivo è /components/lib/shadcn e i form convertiti si cercano in /components/cat/form. Per capire Tailwind prima di toccare il sito leggi che cos’è Tailwind CSS; per il layout Flexbox o Grid; per l’errore più comune la classe non viene applicata. Il confronto misurato tra librerie è in React UI libraries 2026.

## FAQ

### Quanto tempo richiede la migrazione da Bootstrap a Tailwind?

Dipende dal numero di pagine e di plugin JavaScript, non dal numero di classi. Conta le pagine con modal o dropdown: quelle decidono il costo.

### Posso usare Bootstrap e Tailwind insieme?

Sì, con un prefisso Tailwind e senza Preflight. Senza prefisso le classi con lo stesso nome si sovrascrivono e il debug diventa casuale.

### Devo riscrivere tutti i componenti?

No. Griglia e utility si convertono in modo meccanico; i componenti JavaScript vanno riscritti perché Tailwind non porta comportamento.

### Tailwind sostituisce la griglia di Bootstrap?

Sì, con CSS Grid e utility responsive. I breakpoint però vanno rifatti: quelli di Bootstrap non corrispondono per nome né per valori.

### Bootstrap è morto?

No. Bootstrap 5 è stabile e mantenuto con licenza MIT. La scelta dipende dal progetto, non dalla popolarità.