How do I convert Bootstrap to Tailwind?

Class mapping for the common cases

• d-flex justify-content-between align-items-center becomes flex justify-between items-center.
• d-none d-md-block becomes hidden md:block.
• row + col-md-6 becomes grid md:grid-cols-2 gap-6 (or flex flex-wrap with md:w-1/2).
• fw-bold becomes font-bold, text-muted becomes something like text-gray-500.
• rounded stays rounded, shadow-sm becomes shadow-sm or shadow-xs depending on how strong you want it.
• w-100 becomes w-full, mx-auto stays mx-auto.

Spacing numbers do not line up

Bootstrap 5 spacing utilities use a 0 to 5 scale where 3 is 1rem. Tailwind uses 0.25rem steps, so the same number means something different:

• mt-1 (0.25rem) stays mt-1.
• mt-2 (0.5rem) stays mt-2.
• mt-3 (1rem) becomes mt-4.
• mt-4 (1.5rem) becomes mt-6.
• mt-5 (3rem) becomes mt-12.

A blind find-and-replace of mt-3 will silently shrink your spacing. Map by value, not by name.

Breakpoints are different too

Bootstrap 5 breakpoints are 576, 768, 992, 1200 and 1400px. Tailwind's defaults are 640, 768, 1024, 1280 and 1536px. Only md matches. If layouts must switch at the same widths, override the breakpoints in your theme:

@import "tailwindcss";

@theme {
  --breakpoint-sm: 36rem;
  --breakpoint-lg: 62rem;
  --breakpoint-xl: 75rem;
  --breakpoint-2xl: 87.5rem;
}

Or use a one-off value like min-[992px]:flex where only a few places need it.

Components and JavaScript

A Bootstrap button is a single class. In Tailwind you spell it out, then wrap it in a component so you write it once:

<!-- Bootstrap -->
<button class="btn btn-primary">Save</button>

<!-- Tailwind -->
<button class="rounded-md bg-blue-600 px-3 py-1.5 font-medium text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Save</button>

Modals, dropdowns, collapses and tooltips depend on Bootstrap's JavaScript, which reads data-bs-* attributes. Tailwind has no JavaScript. Replace them with native elements (<dialog>, <details>), a small library like Alpine.js, or headless components from your framework. Keep Bootstrap loaded until the last of those is gone.

Convert rendered Bootstrap with PickCode

1. Run the Bootstrap page. Open your app locally with Bootstrap still loaded.
2. Pick a component. Press Alt Shift C and select a card, navbar or form.
3. Copy as Tailwind. PickCode reads the styles Bootstrap actually applied and maps them to the default Tailwind scale, so mt-3 comes out by value, not by name.
4. Swap it in. Paste the Tailwind version in place of the Bootstrap markup and remove the old classes.
5. Rewire the JavaScript. Replace data-bs toggles with your own code. Copying never brings behavior.

Questions

Sources

1. Reddit r/tailwindcss: advice on converting from Bootstrap to Tailwind
2. Reddit r/tailwindcss: Bootstrap to Tailwind
3. Tailwind CSS: responsive design
4. Tailwind CSS: theme variables