Rewriting Bootstrap's Button Components Using Tailwind CSS

Table of contents

• Introduction
• Preview
• Code
• Notes
• References

Introduction

In this article, we look at the conversion of Bootstrap 5 buttons [↗] to Tailwind CSS 3 [↗].

Preview

Code

Tailwind code
✅ Wrap📋
01: <div class="container">
02:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded hover:text-[#fff] hover:bg-[#0b5ed7] hover:border-[#0a58ca] text-[#fff] bg-[#0d6efd] border-[#0d6efd]">Primary</button>
03:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded hover:text-[#fff] hover:bg-[#5c636a] hover:border-[#565e64] text-[#fff] bg-[#6c757d] border-[#6c757d]">Secondary</button>
04:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded hover:text-[#fff] hover:bg-[#157347] hover:border-[#146c43] text-[#fff] bg-[#198754] border-[#198754]">Success</button>
05:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded hover:text-[#fff] hover:bg-[#bb2d3b] hover:border-[#b02a37] text-[#fff] bg-[#dc3545] border-[#dc3545]">Danger</button>
06:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded hover:text-[#000] hover:bg-[#ffca2c] hover:border-[#ffc720] text-[#000] bg-[#ffc107] border-[#ffc107]">Warning</button>
07:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded hover:text-[#000] hover:bg-[#31d2f2] hover:border-[#25cff2] text-[#000] bg-[#0dcaf0] border-[#0dcaf0]">Info</button>
08:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded  text-[#000] bg-[#f8f9fa] border-[#f8f9fa]">Light</button>
09:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded  text-[#fff] bg-[#212529] border-[#212529]">Dark</button>
10: 
11:     <button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded  font-normal text-[#0d6efd] underline">Link</button>
12: </div>

Notes

For the colors I decided to use the [] syntax to set the exact hex as Bootstrap thus: hover:border-[#0a58ca] text-[#fff].... You can however use Tailwind's color presets [↗].

This is one of the components that had some extra styling for transitions, I left those out.

Here is the Bootstrap base styling for all buttons:

Original Bootstrap CSS
✅ Wrap📋
01: .btn {
02:     display: inline-block;
03:     font-weight: 400;
04:     line-height: 1.5;
05:     color: #212529;
06:     text-align: center;
07:     text-decoration: none;
08:     vertical-align: middle;
09:     cursor: pointer;
10:     -webkit-user-select: none;
11:     -moz-user-select: none;
12:     user-select: none;
13:     background-color: transparent;
14:     border: 1px solid transparent;
15:     padding: 0.375rem 0.75rem;
16:     font-size: 1rem;
17:     border-radius: 0.25rem;
18:     /* transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
19: 
20: }

The commented-out bit is what I left out.

You may have also noticed the repetition of some utility classes. Tailwind recommends creating reusable styles [↗] whenever this happens.

This can simply be a component function that takes in unique utilities as a parameter and then produces the resulting HTML element with both the common and unique utilities set as a class attribute. For example:

buttonComponent.js
✅ Wrap📋
01: function buttonComponent(textContent, propString) {
02:     return `<button type="button" class="inline-block font-normal leading-normal text-center no-underline align-middle cursor-pointer select-none border-[1px] border-[solid] px-3 py-1.5 text-[1rem] rounded ${propString}">${textContent}</button>`
03: }
04: 
05: buttonComponent('Primary', 'hover:text-[#fff] hover:bg-[#0b5ed7] hover:border-[#0a58ca] text-[#fff] bg-[#0d6efd] border-[#0d6efd]')

It's ultimately up to you and your needs.

References

• Bootstrap 5 Buttons [↗].
• Tailwind hover effect [↗]