Converting Bootstrap 5 Styles To Tailwind (WIP)

This article is still in progress (WIP). If you'd like, you can subscribe [↗] to receive notifications whenever new content is added to just this article.

Introduction

My goal is to convert as many Bootstrap 5 [↗] styles and components to Tailwind 3 [↗].

The aim is to offer a helpful resource for those transitioning from Bootstrap to Tailwind, allowing you to migrate while learning Tailwind's constructs and classes along the way.

I also highlight key changes and personal preferences for each conversion. You can scroll to the bottom [→] of this page to view the complete list of conversions.

What and why Tailwind CSS?

CSS frameworks employ various philosophies and implementations, all with the core focus of simplifying the process of styling web pages.

A common approach, adopted by CSS frameworks like Bootstrap, is to offer pre-defined styling right out of the box. These styles can be applied to HTML elements using selectors such as classes, IDs, and tags.

Tailwind, on the other hand, adopts a utilities-first approach. This means it provides a host of granular CSS utilities that can be directly applied to HTML elements, allowing for precise and customizable styling.

For instance, in Bootstrap, you can swiftly convert a tag into an alert banner by applying the .alert class, like so: <‌span class="alert alert-success">Success message<‌/span>.

In Tailwind, achieving the same result requires specifying each styling effect individually:


01: <span class="text-[#0f5132] bg-[#d1e7dd] border-[#badbcc] relative p-4 mb-4 border-[1px] border-[solid] border-[transparent]">Success message</span>

As you can see, Tailwind necessitates typing out each styling attribute individually.

Now, why consider Tailwind? Keep reading to find out!

Why convert Bootstrap to Tailwind?

As someone who isn't a designer, figuring out the aesthetics of a Navbar, for example, can be time-consuming. However, Bootstrap simplifies this process by providing pre-designed components like the Navbar [↗]. I can start with the Navbar component and then customize the default styling to achieve the desired look and feel.

In contrast, using Tailwind requires having a mockup or design as a reference point (To be fair there are many Tailwind components [↗] out there). This may not be an issue for businesses or individuals with access to designs and in fact, builds a strong case for them to use Tailwind. It's a perfect tool to translate designs into UI rather than trying to modify or override existing styles as is the case of Bootstrap.

Even if you don't have a pre-defined design system, it's still worth considering Tailwind. You can treat Bootstrap as your design system and replicate its default appearance using Tailwind, while also implementing your design modifications along the way.

One advantage of this approach is the ability to easily reference Bootstrap components, extract their styles, and translate them into Tailwind as you style your web page.

Furthermore, this "design system translation" technique can be applied to other frameworks like Bulma [↗] as well.

Bootstrap to Tailwind converters

If you would like to programmatically convert your Bootstrap-styled project to Tailwind, here are some tools I found:

A bit of caution though, The Bootstrap framework tries to satisfy as many styling needs as possible, this means it contains styles you might end up not using, and automatically translating your styles might lead to unnecessary bloat.

Getting started

There are different ways you can set up Tailwind, now here is the deal, my goal is to convert Bootstrap components to Tailwind so I will be using the Tailwind CDN throughout.


01: <script src="https://cdn.tailwindcss.com"></script>

It's worth noting that while using the Tailwind CDN is convenient for demonstration and development purposes, it's not recommended for use in production. This is because the CDN pulls in the entire Tailwind library, including utilities that you may not necessarily use. You miss out on Tailwind's ability to analyze your HTML markup and generate the exact CSS you need.

I would advise referring to Tailwind's official installation guide [↗] and selecting the installation method that best suits your application setup.

Now that we've covered that, let's dive in! :)

Components