Tailwind Converter (beta)

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.

See the Tailwind Converter in action in this short video demo.

Requirements

  • A Laravel application running version 5.5 or higher.
  • Your compiled CSS committed to your project as public/css/app.css.

Note: The beta version of the Tailwind Converter is optimized for Laravel applications using Bootstrap version 3 or 4. However, this is configurable for other web applications, and future releases of the Tailwind Converter will support all web applications and be optimized for additional CSS frameworks.

Conversions

The Tailwind Converter automates the following conversions:

  • Installs the latest version of Tailwind CSS.
  • Creates a new Tailwind stylesheet.
  • Normalizes color 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.

Recommendations

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.

Configuration

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.

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 (:)

Still have questions? Message @laravelshift on Twitter or email support@laravelshift.com.

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.