Free Online Tool

CSS Framework Converter

Convert HTML between Bootstrap, Tailwind CSS, and vanilla CSS classes — instantly in your browser. Layout, typography, spacing, colors, and components all covered.


Convert
Input BS5
0 lines
Output TW
Ready

Class mapping preview (showing active conversion direction)

CSS Framework Converter

This tool converts HTML class attributes between Bootstrap 5, Tailwind CSS, and vanilla CSS utility classes. It handles layout (flexbox, grid, containers), typography, spacing (margin/padding), colors, display utilities, and common component patterns like buttons, cards, badges, and alerts.

Bootstrap to Tailwind

Bootstrap's d-flex becomes Tailwind's flex, justify-content-between becomes justify-between, mt-3 becomes mt-3 (compatible scale), and btn btn-primary becomes btn with Tailwind component classes.

Limitations

Some Bootstrap components (modals, dropdowns, carousels) rely on JavaScript and data attributes that cannot be converted by class substitution alone. Tailwind's JIT classes and arbitrary values like [color:#ff0000] are preserved as-is when converting to Bootstrap or CSS.