Design system
Migrare da Bootstrap a Tailwind senza riscrivere il sito
Tailwind entra accanto a Bootstrap e lo sostituisce una pagina alla volta. Le tre fasi, cosa converte in modo meccanico, cosa va riscritto e il limite da mettere per iscritto.
In sintesi
- Si migra in tre fasi: coesistenza con prefisso, conversione pagina per pagina, rimozione di Bootstrap.
- Griglia e utility si convertono in modo meccanico; modal, dropdown e tooltip vanno riscritti su primitive headless.
- Il catalogo indicizza 13 file sorgente Bootstrap e 61 componenti shadcn al 1 novembre 2026.
- La scala di spaziatura di Bootstrap non è quella di Tailwind: la mappa va scritta, non copiata.
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
- Coesistenza: installa Tailwind con prefisso `tw-` e senza Preflight. Bootstrap continua a governare le pagine vecchie, Tailwind le nuove.
- Conversione: una pagina per volta. Parti dalle pagine con pochi plugin JavaScript: sono quelle dove il cambio si misura in ore, non in settimane.
- Rimozione: togli il CSS di Bootstrap, poi il bundle JS, poi i plugin. Ogni passo è separato, così un errore si annulla con un revert.
Cosa converte bene e cosa no
| Bootstrap | Tailwind | Lavoro | Nota |
|---|---|---|---|
| Griglia `.row` / `.col-*` | CSS Grid + `max-w-*` | Meccanico | I breakpoint vanno rifatti, non copiati |
| Utility `.d-flex`, `.mt-3` | `flex`, `mt-3` | Meccanico | La scala Bootstrap va da 0 a 5, Tailwind da 0 a 96: la mappa non è 1:1 |
| Form `.form-control` | Classi Tailwind + stato | Medio | Validazione e stati vanno riscritti a mano |
| Modal, dropdown, tooltip | Primitive headless (Radix, Base UI) | Non meccanico | Comportamento, focus e tastiera sono lavoro nuovo |
| Tema `$primary` | Variabili CSS + `@theme` | Una volta | Rinomina i token prima di convertire le pagine |
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 -lLa 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.
Domande frequenti
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à.