Shift with red gradient lettering

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 conversion takes a bottom-up approach by converting the CSS, not the markup. By preserving your markup you avoid breaking behavior. Yet moving forward, you may rely solely on Tailwind CSS and remove your dependency on other CSS frameworks.

Screenshot of a pull request with atomic commits for each change of the Tailwind Converter

Watch a demo


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


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.


To achieve 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.


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

The location of your compiled CSS file to convert to Tailwind CSS. The path should be relative to your project root.
The path to your source CSS files where Shift should save the converted stylesheets. The path should be relative to your project root.
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 (:)

Sign in with any of the following services to connect Shift with your Laravel project.

Don't use one of these services?

Temporarily push your project to a free, private repository on one of these cloud-based services or upgrade your project locally with Shift for Docker.