Tailwindo

This tool can convert Boostrap CSS classes in HTML code to equivalent Tailwind CSS classes, still not perfect but good as a helper tool.

• Laravel News: Convert your Bootstrap CSS to Tailwind with Tailwindo
• Laravel Arabic: تحويل صفحات Bootstrap إلى Tailwind مع حزمة Tailwindo

Note: Tailwindo currently convert code to Tailwindcss 0.7, to convert to 0.1 from 0.7 use (tailwind-shift)

You can install the package via composer globally:

$ composer global require awssat/tailwindo

Then use it to convert a snippet, a file or a folder.

$ tailwindo path/to/directory/ 

$ tailwindo path/to/directory/ --recursive=true

You can also use the short hand -r true instead of the full --recursive=true

This will allow you to upgrade your vue files, twig files, and more!

$ tailwindo path/to/directory/ --extensions=vue,php,html

You can also use the short hand -e vue,php,html instead of the full --extensions

Please note this can be considered a destructive action as it will replace the orignal file and will not leave a copy of the original any where.

$ tailwindo path/to/directory/ --replace=true

just CSS classes:

$ tailwindo 'alert alert-info'

Or html:

$ tailwindo '<div class="alert alert-info mb-2 mt-3">hi</div>'

By default this will copy the code into a new file like file.html -> file.tw.html

$ tailwindo file.blade.php

This option works with the --replace=true option

You can install the package via composer locally in your project folder:

$ composer require awssat/tailwindo

Then use it like this:

use Awssat\Tailwindo\Converter;

$input = '<div class="alert alert-danger">hi</div>'; //BootstrapCSS code

$output = (new Converter)
            ->setContent($input)
            ->convert()
            ->get(); // gets converted code

The MIT License (MIT). Please see License File for more information.