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.
- A Laravel application running version 5.5 or higher.
- Your compiled CSS committed to your project as
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.
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
- 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 (