Tailwind Converter

The Tailwind Converter automates the process of converting CSS frameworks, like Bootstrap, as well as your custom CSS to use the Tailwind CSS utility classes.

This takes a bottom-up approach by converting the CSS, not the markup. By preserving your markup Shift avoids breaking any behavior added by JavaScript.

After running the Tailwind Converter you will have your original site styled with Tailwind CSS and the ability to use Tailwind CSS exclusively for future development.

Using the Tailwind Converter to automatically convert your project has an estimated time savings of 8 hours.

Screenshot of a pull request with automated changes from the Tailwind Converter

Watch a demo

Requirements

Your compiled CSS committed to your project as public/css/app.css (configurable)

Automated Conversions

The Tailwind Converter automates the following conversions:

Installs the latest version of Tailwind CSS.
Creates a new Tailwind stylesheet.
Normalizes colors and spacing to use Tailwind's design system.
Adds a Tailwind compatible shim for common CSS frameworks, like Bootstrap.
Configures custom colors within tailwind.config.js.
Renames classes which conflict with Tailwind.
Updates your build pipeline with PostCSS and PurgeCSS.

Manual Conversions

In order to avoid breaking, Shift does not alter your HTML markup. If you wish to convert the HTML associated with Bootstrap components, you will need to do so manually.

Recommendations

To achieve the best possible results from the Tailwind Converter, Shift has the following recommendations:

Avoid converting third-party libraries, like Font Awesome, Hover, or Animate, by compiling your CSS without them and reintroduce them afterward.
Limit the styles converted to only those which you are using by compiling a production version of your CSS run through an optimizer like PurgeCSS.

Configuration

As with other Shifts, you may add a Shift Configuration file to your project to configure the Tailwind Converter to run for your web application structure.

compiled_css: The location of your compiled CSS file to convert to Tailwind CSS. The path should be relative to your project root.
source_path: The path to your source CSS files where Shift should save the converted stylesheets. The path should be relative to your project root.
template_paths: The paths to any HTML or markup Shift should scan for CSS class or style changes. The path should be relative to your project root, with multiple paths separated by a colon (:)