content
Tailwind CSS List
Create attractive lists using Tailwind CSS, a potent tool for styling lists, improving readability, and enhancing user experience.
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.
List decimal
- Start by signing up for our newsletter.
- Explore our collection of articles and tutorials.
- Join our community forums to connect with like-minded individuals.
List disc
- Benefits of regular exercise:
- Healthy weight maintenance
- Improved mood and mental health
List none
- Essential items for a hiking trip:
- Backpack with proper support
- Water bottle or hydration pack
<h5 class="text-base-content 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 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 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.
This example uses list-inside.
List inside
- "Harry Potter and the Sorcerer's Stone" by J.K. Rowling
- "To Kill a Mockingbird" by Harper Lee
- "The Great Gatsby" by F. Scott Fitzgerald
<h5 class="text-base-content 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>This example uses list-outside.
List outside
- Rio de Janeiro, Brazil
- Paris, France
- Kyoto, Japan
<h5 class="text-base-content 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>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.
- Mumbai, India
- Paris, France
- Kyoto, Japan
- Rio de Janeiro, Brazil
<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>This showcases the process of incorporating a custom marker with various styles. Although it presently displays the primary color, the color can be adjusted as needed.
Illustration of a solid color example.
- Product Overview
- Installation Guide
- Troubleshooting Tips
<ul class="space-y-3 text-sm">
<li class="flex items-center space-x-3">
<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">
<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">
<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>Illustration of a soft color example.
- Product Overview
- Installation Guide
- Troubleshooting Tips
<ul class="space-y-3 text-sm">
<li class="flex items-center space-x-3">
<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">
<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">
<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>An instance showcasing an outline example.
- FAQ
- Installation Guide
- Troubleshooting Tips
<ul class="space-y-3 text-sm">
<li class="flex items-center space-x-3">
<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">
<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">
<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>Basic Description list example.
Product Information
Details of the latest product release.
- Product Name
- FlyonUI Django
- Category
- Admin template
- Release Date
- March 15, 2024
- Price
- $499
- Description
- The FlyonUI – Bootstrap Django Admin Dashboard Template – is the most developer friendly & highly customizable Admin Dashboard Template based on Bootstrap 5.
<div>
<div class="px-4 sm:px-0">
<h3 class="text-2xl font-semibold text-base-content">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">Product Name</dt>
<dd class="mt-1 text-base-content/80 sm:col-span-2 sm:mt-0">FlyonUI 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">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">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">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">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">FlyonUI – 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">Documents</dt>
<dd class="mt-2 text-base-content 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 shrink-0"></span>
<div class="ms-4 flex min-w-0 flex-1 gap-2">
<span class="truncate font-medium">FlyonUI_Pro_User_Manual.pdf</span>
<span class="shrink-0 text-base-content/50">3.2mb</span>
</div>
</div>
<div class="ms-4 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 shrink-0"></span>
<div class="ms-4 flex min-w-0 flex-1 gap-2">
<span class="truncate font-medium">FlyonUI_Pro_Installation_Guide.pdf</span>
<span class="shrink-0 text-base-content/50">5.1mb</span>
</div>
</div>
<div class="ms-4 shrink-0">
<a href="#" class="link link-primary">Download</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>Tailwind offers the marker: modifier, allowing us to adjust the color of markers. Refer to the Tailwind documentation
on Marker for more details.
- "Harry Potter and the Sorcerer's Stone" by J.K. Rowling
- "To Kill a Mockingbird" by Harper Lee
- "The Great Gatsby" by F. Scott Fitzgerald
- "Harry Potter and the Sorcerer's Stone" by J.K. Rowling
- "To Kill a Mockingbird" by Harper Lee
- "The Great Gatsby" by F. Scott Fitzgerald
<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>A basic form of the inline list with dotted separator.
- Product
- Pro Tips
- Install Guide
<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>