Online Tool Store
Bootstrap to Tailwind Converter
Convert Bootstrap utility classes to their nearest Tailwind equivalents, with the grid and spacing scales mapped and the gaps flagged.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Developer
Bootstrap to Tailwind Converter
Frontend preview — no upload or external service.
Converted markup
d-flex → flex, justify-content-between → justify-between, mb-3 → mb-4 (Bootstrap's 1rem maps to Tailwind's spacing step 4, not 3).
How the Bootstrap to Tailwind Converter works
- Paste the markup or the class list you are migrating.
- Read the spacing conversions carefully — the two scales use the same numbers for different values.
- Handle the flagged unmapped classes by hand; components have no one-to-one equivalent.
The method
The scales collide numerically. Bootstrap's spacing steps are 0, .25rem, .5rem, 1rem, 1.5rem, 3rem; Tailwind's are 0.25rem per step.
Bootstrap mb-3 = 1rem = Tailwind mb-4
Copying the number across unchanged gives mb-3 = 0.75rem — a quarter of a rem out on every margin in the project.
FAQ
Do Bootstrap components convert?
No. Utilities map reasonably well; components like modals, dropdowns and carousels are markup plus JavaScript, and Tailwind has no equivalent because it deliberately ships no components.
Why do the spacing numbers differ?
Because the scales are defined differently and happen to use overlapping integers. It is the single most common migration bug, and it is invisible until the layout looks subtly wrong.
Is the grid a direct translation?
Roughly. Bootstrap's twelve-column row and col classes map onto Tailwind's grid utilities, but responsive breakpoint names and defaults differ, so check each breakpoint rather than assuming.
How we compare
| Feature | Online Tool Store | A CLI script | An IDE plugin |
|---|---|---|---|
| Spacing scale mapped correctly | ✓ | Manual | Varies |
| Flags unmapped classes | ✓ | ✗ | ✗ |
| No build step | ✓ | ✓ | ✗ |
| Converts components | ✗ | ✗ | ✗ |
Bootstrap to Tailwind Converter handles utilities and flags what it cannot map — the spacing scale collision is the part that silently breaks layouts.