Developer Tools - Bootstrap to Tailwind conversion tool (WIP)

Hello Coders,

Thank you for landing on this page. This article presents briefly an open-source conversion tool of a legacy app, styled with Bootstrap to Tailwind CSS.

The source code is committed on Bootstrap to Tailwind CSS Github repository - MIT license. Inspired by Tailwindo (Php based)

Bootstrap CSS

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.


Tailwind CSS

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.


The Implementation

The tool will apply a short list of actions on each HTML file detected in a target directory:

  • Detect the lines where Bootstrap CSS is loaded and replace with Tailwind CSS
  • Scan the HTML and replace the Bootstrap classes with the corespondent ones in Tailwind, based on a pre-loaded map
  • The changes are reflected in the browser via a LIVE edit option

Bootstrap to Tailwind Class mapping

Full mapping definitions committed on Github. The information is structured in sections:

Media (Bootstrap / Tailwind):

  • "xs -> sm"
  • "sm -> sm"
  • "md -> md"

Grid (Bootstrap / Tailwind):

  • "1 -> 1/6"
  • "2 -> 1/5"
  • "3 -> 1/4"
  • "4 -> 1/3"

To see the full mapping, please access this link.


Resources

Show Comments

Get the latest posts delivered right to your inbox.