Rewriting Bootstrap's List Group Component Using Tailwind CSS

Table of contents

• Introduction
• Preview
• Code
• Notes
• References

Introduction

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

Preview

Code

List group
✅ Wrap📋
01: <ul class="list-disc flex flex-col pl-0 mb-0 rounded">
02:     <li class="text-white bg-[#0d6efd] border-[#0d6efd] relative block px-4 py-2 no-underline border-[0.5px] border-[solid] border-[rgba(0,0,0,.125)] [border-top-left-radius:inherit] [border-top-right-radius:inherit]" aria-current="true">An active item</li>
03:     <li class="text-[#212529] bg-white relative block px-4 py-2 no-underline border-[0.5px] border-[solid] border-[rgba(0,0,0,.125)]">A second item</li>
04:     <li class="text-[#212529] bg-white relative block px-4 py-2 no-underline border-[0.5px] border-[solid] border-[rgba(0,0,0,.125)]">A third item</li>
05:     <li class="text-[#212529] bg-white relative block px-4 py-2 no-underline border-[0.5px] border-[solid] border-[rgba(0,0,0,.125)]">A fourth item</li>
06:     <li class="text-[#212529] bg-white relative block px-4 py-2 no-underline border-[0.5px] border-[solid] border-[rgba(0,0,0,.125)] [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit]">And a fifth one</li>
07: </ul>

Notes

The first and last cards have rounded edge: [border-top-left-radius:inherit] [border-top-right-radius:inherit] and [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit] respectively.

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

References

• List group component [↗]