Migrating from Bootstrap to Tailwind without rewriting the site

Moving from Bootstrap to Tailwind takes three phases, not one big bang: Tailwind arrives beside Bootstrap, one page at a time, and Bootstrap leaves when the last page is converted. The site stays online throughout, but for a while it pays for two style systems.

Bootstrap is a complete library: grid, utilities, components and JavaScript. Tailwind generates utilities: it ships no components and no behaviour. The migration is not a syntax change, it is giving up a part that someone has to rewrite.

The three phases

• Coexistence: install Tailwind with the `tw-` prefix and without Preflight. Bootstrap keeps the old pages, Tailwind takes the new ones.
• Conversion: one page at a time. Start with pages that use few JavaScript plugins: those are where the change is measured in hours, not weeks.
• Removal: drop the Bootstrap CSS, then the JS bundle, then the plugins. Each step stands alone, so a mistake is undone with one revert.

What converts well and what does not

The configuration that avoids the clash

Two utility systems in one document overwrite each other. Bootstrap defines `.container`, `.border`, `.shadow` and `.rounded`; Tailwind defines classes with the same names. The prefix is not elegance: it is the only way to avoid debugging a button that changes its own border.

Tailwind 4 declares the prefix in the CSS import. If you also drop Preflight, Bootstrap keeps its resets and Tailwind does not rewrite `margin`, `border` and `font-size` on every element.

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

The third line is the dashboard: the number must fall with every converted page. When it reaches zero, Bootstrap can leave.

The page to start from

Pick a static page with a form and no modal. The contact page is the best test: grid, fields, validation and error messages. If it survives the visual comparison and the form works, the map is ready for the rest.

The limit to write down

Named limitation: Tailwind ships no JavaScript components. Anyone using Bootstrap modal, dropdown and tooltip must rebuild them on headless primitives, and that work is not included in converting classes. If the site depends on five plugins, the migration costs more than the CSS part.

Licences are simple: Bootstrap is MIT, Tailwind is MIT, Radix and Base UI are MIT. The licence does not decide the migration; how much JavaScript you use does.

The starting record is /components/lib/bootstrap, the destination is /components/lib/shadcn and converted forms live in /components/cat/form. To understand Tailwind before touching the site, read what Tailwind CSS is; for layout, Flexbox or Grid; for the most common error, the class is not applied. The measured comparison between libraries is in React UI libraries 2026.