Bootstrap to Tailwind with Tailwindo

A popular front-end framework for building responsive and attractive web applications, Bootstrap is probably familiar to web developers. It get easier to convert Bootstrap to tailwind with tailwindo. In recent years, Tailwind CSS has gained significant traction in the web development community. The Tailwind CSS styling system emphasizes utility classes rather than pre-designed components in order to style web applications differently.

It's not impossible to switch from Bootstrap to Tailwind CSS, if you've ever thought it would be difficult. The Tailwindo project aims to simplify this conversion process, making it easier for you to migrate your existing Bootstrap-based projects to Tailwind CSS. In this article, we'll explore what Tailwindo is and how it can be installed and configured.

Tailwindo: what is it?

Based on Bootstrap 4 and Tailwind CSS, Tailwindo is a utility-first CSS framework. You can use it to transition from Bootstrap's components to Tailwind CSS's utility classes without having to rewrite your entire codebase, as it bridges between these two popular frameworks.

Bootstrap to Tailwind Installation

To install Tailwindo, follow these steps:

composer global require awssat/tailwindo

Convert a whole directory

just the files in a directory, it's not recursive

tailwindo path/to/directory/

Recursively convert a whole 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

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

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

Convert one 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 too.

Convert raw code (a snippet of code)

just CSS classes:

tailwindo 'alert alert-info'

Or html:

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

Extract changes to a single CSS file

Extract changes as components to a separate css file (tailwindo-components.css).

tailwindo --components=true path/to/directory/

For example if you have a file called demo.html and contains:

<div class="alert alert-info mb-2 mt-3">Example</div>

and runs:

tailwindo --components=true demo.html

then Tailwindo will not change demo.html and create a CSS file called 'tailwindo-components.css' that contains:

.alert {
	@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-info {
	@apply bg-teal-200 bg-teal-300 bg-teal-800;
}

This will let you keep older markup unchanged and you can just add the new extract components to your main css file.