Back to Homepage

Bootstrap to Tailwind with Tailwindo

3 min read


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

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.

Follow @LaravelSage on X → Follow @LaravelSage on Facebook →
Aniket Singh

Aniket Singh

View All Articles

Full-stack developer with a knack for Merging creativity with technical expertise for standout solutions.

Related Articles

Top Laravel Packages for Building Powerful Applications

Top Laravel Packages for Building Powerful Applications

Are you ready to take your Laravel skills to the next level and build extraordinary applications? Look no further! In this blog post, we will unveil a treasure trove of top packages that will revolutionize your development process.

MarkdownX:  Markdown Editor by DevDojo

MarkdownX: Markdown Editor by DevDojo

It's a lightweight markup language used by developers, writers, and content creators for formatting text for various purposes, such as documentation, blog posts.

Subscribe for 20+ new Laravel tutorials every week

You can unsubscribe at any time. You'll also get -20% off my courses!

© 2024


Laravel Sage

   |    Privacy Policy