Creating Stylish Lists with Tailwind CSS: An Easy Guide

Heads up, this content is in beta. Use at your own risk!

Lists are fundamental components of any webpage, be it for navigation, itemized information, or even for structuring content. In this guide, we will walk you through how to create an aesthetically pleasing list using Tailwind CSS.

Basic List

Let’s start by creating a basic list:

<ul class="list-disc list-inside">
  <li class="mb-2">Apple</li>
  <li class="mb-2">Orange</li>
  <li class="mb-2">Banana</li>
</ul>

In this example, we’ve created a simple unordered list (ul) with list items (li). The list-disc class applies disc-style list markers, while list-inside sets the markers inside the list item as opposed to outside. The mb-2 class on each list item creates a bit of margin below each item for better readability.

Styling the List

Now, let’s add some color and style:

<ul class="p-4 list-disc list-inside bg-blue-100 rounded shadow-md">
  <li class="mb-2 text-blue-700">Apple</li>
  <li class="mb-2 text-blue-700">Orange</li>
  <li class="mb-2 text-blue-700">Banana</li>
</ul>

In this example, we’ve added a light blue background (bg-blue-100) to the list, some padding (p-4), rounded corners (rounded), and a medium shadow (shadow-md). We’ve also changed the text color of the list items to a darker blue (text-blue-700).