Rewriting Bootstrap's Alert Components Using Tailwind CSS

Table of contents

• Introduction
• Preview
• Code
• Notes
• References

Introduction

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

Preview

Code

Tailwind code
✅ Wrap📋
01:  <div class="container">
02:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent]text-[#084298] bg-[#cfe2ff] border-[#b6d4fe]"
03:         role="alert">
04:         A simple primary alert—check it out!
05:     </div>
06:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#41464b] bg-[#e2e3e5] border-[#d3d6d8]"
07:         role="alert">
08:         A simple secondary alert—check it out!
09:     </div>
10:     <div class="text-[#0f5132] bg-[#d1e7dd] border-[#badbcc] relative p-4 mb-4 border-[1px] border-[solid] border-[transparent]"
11:         role="alert">
12:         A simple success alert—check it out!
13:     </div>
14:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#842029] bg-[#f8d7da] border-[#f5c2c7]"
15:         role="alert">
16:         A simple danger alert—check it out!
17:     </div>
18:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#664d03] bg-[#fff3cd] border-[#ffecb5]"
19:         role="alert">
20:         A simple warning alert—check it out!
21:     </div>
22:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#055160] bg-[#cff4fc] border-[#b6effb]"
23:         role="alert">
24:         A simple info alert—check it out!
25:     </div>
26:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#636464] bg-[#fefefe] border-[#fdfdfe]"
27:         role="alert">
28:         A simple light alert—check it out!
29:     </div>
30:     <div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#141619] bg-[#d3d3d4] border-[#bcbebf]"
31:         role="alert">
32:         A simple dark alert—check it out!
33:     </div>
34: </div>

Notes

For the colors I decided to use the [] syntax to set the exact hex as Bootstrap thus: text-[#141619] bg-[#d3d3d4] border-[#bcbebf]. You can however use Tailwind's color presets [↗].

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:

alertComponent.js
✅ Wrap📋
01: function alertComponent(textContent, propString) {
02:     return `<div class="relative p-4 mb-4 border-[1px] border-[solid] border-[transparent] text-[#141619] ${propString}"
03:         role="alert">
04:         ${textContent}
05:     </div>`
06: }
07: 
08: alertComponent('A simple dark alert—check it out!', 'bg-[#d3d3d4] border-[#bcbebf]')

It's ultimately up to you and your needs.

References

• Bootstrap 5 Alerts component [↗].
• Tailwind relative positioning [↗]
• Tailwind text color [↗]
• Tailwind border color [↗]