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.

Installing `tailwindo` for CLI use

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.

Using the command

Possible Options

Convert a directory (just the files in this directory, it's not recursive)

$ tailwindo path/to/directory/

Recursively convert a directory

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

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

Convert different file extensions

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

Overwrite the original files

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

Convert raw code

just CSS classes:

$ tailwindo 'alert alert-info'

Or html:

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

Convert a file

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

Using the package

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

License

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

mrafea-sa/tailwindo