Skip to content
๐Ÿ”Œ Convert Bootstrap CSS code to Tailwind CSS code
Branch: master
Clone or download
Latest commit 639cdc1 May 24, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src wrong variable Mar 22, 2019
tests Apply fixes from StyleCI Nov 18, 2017
.gitignore test Nov 18, 2017
.travis.yml A command line Nov 18, 2017 ~LICENSE Nov 12, 2017 Update May 24, 2019
composer.json Update composer.json Apr 18, 2018
phpunit.xml.dist A command line Nov 18, 2017
tailwindo Fix version Jul 31, 2018


Latest Version on Packagist StyleCI Build Status

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

Media Coverage

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

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 ->

$ 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)
            ->get(); // gets converted code


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

You canโ€™t perform that action at this time.