Tailwind CSS List

Basic example

List style type

Utilize the list-disc class for bulleted lists and the list-decimal class for numeric lists. For further information, consult the Tailwind documentation on List Style Type.

<h5 class="text-base-content/90 text-lg">List decimal</h5>
<ol class="list-inside list-decimal">
  <li class="mb-2">Start by signing up for our newsletter.</li>
  <li class="mb-2">Explore our collection of articles and tutorials.</li>
  <li class="mb-2">Join our community forums to connect with like-minded individuals.</li>
</ol>

<h5 class="text-base-content/90 text-lg">List disc</h5>
<ul class="list-inside list-disc">
  <li class="mb-2">Benefits of regular exercise:</li>
  <li class="mb-2">Healthy weight maintenance</li>
  <li class="mb-2">Improved mood and mental health</li>
</ul>

<h5 class="text-base-content/90 text-lg">List none</h5>
<ul class="list-inside list-none">
  <li class="mb-2">Essential items for a hiking trip:</li>
  <li class="mb-2">Backpack with proper support</li>
  <li class="mb-2">Water bottle or hydration pack</li>
</ul>

Utilize the list-inside and list-outside utility classes to manage the position of list markers and text indentation within a list. Refer to the Tailwind documentation on List Style Position for more details.

List inside

This example uses list-inside.

<h5 class="text-base-content/90 text-lg">List inside</h5>
<ul class="list-inside list-disc">
  <li class="mb-2">"Harry Potter and the Sorcerer's Stone" by J.K. Rowling</li>
  <li class="mb-2">"To Kill a Mockingbird" by Harper Lee</li>
  <li class="mb-2">"The Great Gatsby" by F. Scott Fitzgerald</li>
</ul>

List outside

This example uses list-outside.

<h5 class="text-base-content/90 text-lg ms-4">List outside</h5>
<ul class="list-outside list-disc ms-4">
  <li class="mb-2">Rio de Janeiro, Brazil</li>
  <li class="mb-2">Paris, France</li>
  <li class="mb-2">Kyoto, Japan</li>
</ul>

List image

Utilize the list-image-[url(svg-url)] utilities to manage the marker image for list items. Refer to the Tailwind documentation on List Style Image for more details.

<ul class="text-base-content/80 list-inside list-image-[url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjMzhiZGY4Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy42ODUuMTUzYS43NTIuNzUyIDAgMCAxIC4xNDMgMS4wNTJsLTggMTAuNWEuNzUuNzUgMCAwIDEtMS4xMjcuMDc1bC00LjUtNC41YS43NS43NSAwIDAgMSAxLjA2LTEuMDZsMy44OTQgMy44OTMgNy40OC05LjgxN2EuNzUuNzUgMCAwIDEgMS4wNS0uMTQzWiIgLz48L3N2Zz4=)]" >
  <li class="mb-2">Mumbai, India</li>
  <li class="mb-2">Paris, France</li>
  <li class="mb-2">Kyoto, Japan</li>
  <li class="mb-2">Rio de Janeiro, Brazil</li>
</ul>

<ul class="space-y-3 text-sm">
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="bg-primary text-primary-content flex items-center justify-center rounded-full p-1">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Product Overview </span>
  </li>
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="bg-primary text-primary-content flex items-center justify-center rounded-full p-1">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Installation Guide </span>
  </li>
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="bg-primary text-primary-content flex items-center justify-center rounded-full p-1">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Troubleshooting Tips </span>
  </li>
</ul>

Soft color

Illustration of a soft color example.

<ul class="space-y-3 text-sm">
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="bg-primary/20 text-primary flex items-center justify-center rounded-full p-1">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Product Overview </span>
  </li>
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="bg-primary/20 text-primary flex items-center justify-center rounded-full p-1">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Installation Guide </span>
  </li>
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="bg-primary/20 text-primary flex items-center justify-center rounded-full p-1">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Troubleshooting Tips </span>
  </li>
</ul>

Outline style

An instance showcasing an outline example.

<ul class="space-y-3 text-sm">
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="border-primary text-primary flex items-center justify-center rounded-full border p-0.5">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> FAQ </span>
  </li>
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="border-primary text-primary flex items-center justify-center rounded-full border p-0.5">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Installation Guide </span>
  </li>
  <li class="flex items-center space-x-3 rtl:space-x-reverse">
    <span class="border-primary text-primary flex items-center justify-center rounded-full border p-0.5">
      <span class="icon-[tabler--arrow-right] size-4 rtl:rotate-180"></span>
    </span>
    <span class="text-base-content/80"> Troubleshooting Tips </span>
  </li>
</ul>

Description list

Description list example

Basic Description list example.

<div>
  <div class="px-4 sm:px-0">
    <h3 class="text-2xl font-semibold text-base-content/90">Product Information</h3>
    <p class="mt-1 max-w-full text-base-content/80">Details of the latest product release.</p>
  </div>
  <div class="mt-6 border-t border-base-content/25">
    <dl class="divide-y divide-base-content/25">
      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 text-base">
        <dt class="font-medium text-base-content/90">Product Name</dt>
        <dd class="mt-1  text-base-content/80 sm:col-span-2 sm:mt-0">Flyon Django</dd>
      </div>
      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 text-base">
        <dt class="font-medium text-base-content/90">Category</dt>
        <dd class="mt-1  text-base-content/80 sm:col-span-2 sm:mt-0">Admin template</dd>
      </div>
      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 text-base">
        <dt class="font-medium text-base-content/90">Release Date</dt>
        <dd class="mt-1  text-base-content/80 sm:col-span-2 sm:mt-0">March 15, 2024</dd>
      </div>
      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 text-base">
        <dt class="font-medium text-base-content/90">Price</dt>
        <dd class="mt-1  text-base-content/80 sm:col-span-2 sm:mt-0">$499</dd>
      </div>
      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 text-base">
        <dt class="font-medium text-base-content/90">Description</dt>
        <dd class="mt-1  text-base-content/80 sm:col-span-2 sm:mt-0">
          The <span class="font-semibold text-base-content/90">Flyon – Bootstrap Django Admin Dashboard Template</span> – is the most developer friendly & highly customizable Admin Dashboard Template based on Bootstrap 5.
        </dd>
      </div>
      <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 text-base">
        <dt class="font-medium text-base-content/90">Documents</dt>
        <dd class="mt-2 text-base-content/90 sm:col-span-2 sm:mt-0">
          <ul role="list" class="divide-y divide-base-content/25 rounded-md border border-base-content/25">
            <li class="flex items-center justify-between py-4 ps-4 pe-5">
              <div class="flex w-0 flex-1 items-center">
                <span class="icon-[tabler--paperclip] size-5 flex-shrink-0"></span>
                <div class="ms-4 flex min-w-0 flex-1 gap-2">
                  <span class="truncate font-medium">Flyon_Pro_User_Manual.pdf</span>
                  <span class="flex-shrink-0 text-base-content/50">3.2mb</span>
                </div>
              </div>
              <div class="ms-4 flex-shrink-0">
                <a href="#" class="link link-primary">Download</a>
              </div>
            </li>
            <li class="flex items-center justify-between py-4 ps-4 pe-5">
              <div class="flex w-0 flex-1 items-center">
                <span class="icon-[tabler--paperclip] size-5 flex-shrink-0"></span>
                <div class="ms-4 flex min-w-0 flex-1 gap-2">
                  <span class="truncate font-medium">Flyon_Pro_Installation_Guide.pdf</span>
                  <span class="flex-shrink-0 text-base-content/50">5.1mb</span>
                </div>
              </div>
              <div class="ms-4 flex-shrink-0">
                <a href="#" class="link link-primary">Download</a>
              </div>
            </li>
          </ul>
        </dd>
      </div>
    </dl>
  </div>
</div>

Illustrations

Marker

Tailwind offers the marker: modifier, allowing us to adjust the color of markers. Refer to the Tailwind documentation on Marker for more details.

<ul class="list-inside list-disc marker:text-purple-500">
  <li class="mb-2">"Harry Potter and the Sorcerer's Stone" by J.K. Rowling</li>
  <li class="mb-2">"To Kill a Mockingbird" by Harper Lee</li>
  <li class="mb-2">"The Great Gatsby" by F. Scott Fitzgerald</li>
</ul>
<ul class="list-inside list-decimal marker:text-purple-500">
  <li class="mb-2">"Harry Potter and the Sorcerer's Stone" by J.K. Rowling</li>
  <li class="mb-2">"To Kill a Mockingbird" by Harper Lee</li>
  <li class="mb-2">"The Great Gatsby" by F. Scott Fitzgerald</li>
</ul>

Separator

A basic form of the inline list with dotted separator.

<ul class="flex list-inside list-disc gap-3 marker:text-neutral-300">
  <li class="list-none text-nowrap">Product</li>
  <li class="text-nowrap">Pro Tips</li>
  <li class="text-nowrap">Install Guide</li>
</ul>

FlyonUI

Tailwind CSS List

Basic example

List style type

List decimal

List disc

List none

List Style

Position

List inside

List inside

List outside

List outside

List image

Custom Marker

Arrow style

Solid color

Soft color

Outline style

Description list

Description list example

Product Information

Illustrations

Marker

Separator

On this page

List