⌘ K
bootstrap → tailwind · utility map · spacing · grid · live

Convert Bootstrap to Tailwind

Translate Bootstrap utility classes into their Tailwind CSS equivalents. Spacing, grids, flex, colours and breakpoints all map automatically. Runs locally in your browser.

Bootstrap → Tailwind
Input
256 B
7 lines
Output
269 B
7 lines
Status
ready
live
Ratio
1.05×
out/in
input · bootstrap html
output · tailwind html
<div class="max-w-screen-xl mx-auto px-4 py-5">
  <button class="btn btn-primary text-white px-4">Click</button>
  <div class="row mt-3">
    <div class="md:w-6/12 flex justify-center">Left</div>
    <div class="md:w-6/12 text-end font-bold">Right</div>
  </div>
</div>
Quick Start

How the mapper works

Each class attribute is scanned token by token. A lookup table covers the static utilities; spacing, grid columns and gap helpers fall through to regex rules so things like mt-md-4 or col-lg-6 survive breakpoints intact.

  1. 01

    Paste markup

    Any HTML using Bootstrap 4 or 5 utility classes.

    Parsing is strict-but-tolerant — comments and trailing commas are accepted on input where the source format historically permits them; output stays canonical.

    inputstricttolerantliveparse
    in · sourcehtml · live
    <div class="container py-5">
    loaded · parsedtarget · ready
  2. 02

    Static map

    Utilities like d-flex, fw-bold, bg-primary map 1:1 to Tailwind tokens.

    Conversion preserves type information where the target supports it (numbers stay numeric, booleans stay boolean) so the destination parser never has to re-coerce.

    maptype-preservinglosslesslivememoised
    lookup · optionsmatch · live
    d-flex → flex
fw-bold → font-bold
    options applied · liveround-trip
  3. 03

    Regex helpers

    Spacing (m-3, ms-2, pt-md-4), columns (col-md-6 → md:w-6/12) and gaps convert programmatically.

    Re-encoding is idempotent: running output back through the same converter produces the same bytes, which keeps round-trips git-friendly.

    regexidempotentround-tripdiff-cleandeterministic
    spacing · convertedgrid · ready
    mt-md-4 → md:mt-4
col-md-6 → md:w-6/12
    converted · livediff-clean
  4. 04

    Copy or download

    Grab the rewritten markup and paste into a Tailwind project.

    Copy writes via navigator.clipboard.writeText; downloads use the target’s native MIME so editors apply the right syntax highlighting on open.

    exportclipboardtarget MIMEblobclient-side
    ✓ · copiedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Converting between formats, safely

Pick the strictest source format

Lossy formats hide bugs. Choose JSON or YAML as your source-of-truth, convert downstream as needed.

Round-trip in CI

If your converter is idempotent, your CI can verify A → B → A equals the original. Catches subtle data loss.

Numbers vs strings differ

YAML/TOML have a number type; CSV doesn’t. Quote IDs in CSV to keep leading-zero values intact.

Watch character encoding

Source format may be Latin-1 / Windows-1252; target should be UTF-8. Convert encoding before structure.

Preserve comments where you can

YAML and TOML support comments. Don’t silently drop them — they often encode intent.

Schema-aware beats blind

Use a schema to guide conversion. Field types, required-ness, and defaults survive better with structure.

Related toolsCSS to JS ObjectInline Styles to CSSHTML to JSXCSS UnitsSVG to JSXHTML to Pug
Use Cases

When to convert Bootstrap

Migrations, prototypes, design system swaps.

Framework migration

Move legacy Bootstrap markup to Tailwind during a rewrite. Type information survives: numbers stay numeric, booleans stay boolean, strings stay strings. The destination parser doesn't have to re-coerce, which avoids the &quot;'true' becomes &quot;true&quot;&quot; bug class.

round-trip safe

Prototype to ship

Start with Bootstrap, ship with Tailwind utilities. Run output back through the inverse converter to verify idempotent round-trips in CI. A → B → A should produce byte-identical input — if it doesn't, you've found data loss.

type-preserving

Email to web

Adapt CMS Bootstrap snippets into a Tailwind site. Comments and metadata survive where the target format supports them (YAML, TOML, HCL). The tool doesn't silently drop intent-encoded annotations, which keeps your config self-documenting.

schema-aware

Design system audit

See which utilities map cleanly and which need bespoke work. Pair with a schema (JSON Schema, OpenAPI, Zod, Pydantic) to catch shape drift on either side. Catch breaking changes at conversion time rather than at runtime in production.

lossless

Static snapshots

Convert a one-off marketing page without pulling in jQuery. Output respects target-format conventions: quoting in CSV, indent in YAML, brackets in JSON. Existing parsers don't need patches, and the result drops into legacy pipelines unchanged.

diff-clean

Docs samples

Show before/after for tutorials and onboarding guides. Encoding-aware: handles UTF-8 vs UTF-16 vs Latin-1 / Windows-1252 transparently. The character-set surprise that breaks &quot;works on my machine&quot; doesn't apply here.

spec-grade
FAQ

Frequently asked questions

Bootstrap 4 and 5 utilities. Logical-direction classes (ms-, me-, start, end) map to their physical equivalents.
Yes — sm/md/lg/xl prefix through as Tailwind variants. xxl maps to 2xl.
Components like btn, card and navbar stay untouched — Tailwind has no direct equivalent so you'll wire them up by hand.
No. Only the class attribute is rewritten, so server-rendered HTML, Liquid and Twig templates all survive.
No. The mapping runs entirely in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!