Content
List
Create attractive lists using Tailwind CSS, a potent tool for styling lists, improving readability, and enhancing user experience.
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 <a href="https://tailwindcss.com/docs/list-style-type" target="_blank" class="link link-primary">List Style Type</a>.
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
List Style
Position — List inside
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 <a href="https://tailwindcss.com/docs/list-style-position" target="_blank" class="link link-primary">List Style Position</a> for more details.
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
Position — List outside
This example uses `list-outside`.
List outside
- Rio de Janeiro, Brazil
- Paris, France
- Kyoto, Japan
List image
Utilize the `list-image-[url(data:image/svg+xml,%3Csvg/%3E)]` utilities to manage the marker image for list items. Refer to the Tailwind documentation on <a href="https://tailwindcss.com/docs/list-style-image" target="_blank" class="link link-primary">List Style Image</a> for more details.
- Mumbai, India
- Paris, France
- Kyoto, Japan
- Rio de Janeiro, Brazil
Custom Marker
Arrow style — Solid color
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.
- Product Overview
- Installation Guide
- Troubleshooting Tips
Arrow style — Soft color
Illustration of a soft color example.
- Product Overview
- Installation Guide
- Troubleshooting Tips
Arrow style — Outline style
An instance showcasing an outline example.
- FAQ
- Installation Guide
- Troubleshooting Tips
Description list
Description list example
Basic Description list example.
Product Information
Details of the latest product release.
- Product Name
- Semji Django
- Category
- Admin template
- Release Date
- March 15, 2024
- Price
- $499
- Description
- The Semji – Bootstrap Django Admin Dashboard Template – is the most developer friendly & highly customizable Admin Dashboard Template based on Bootstrap 5.
Illustrations
Marker
Tailwind offers the `marker:` modifier, allowing us to adjust the color of markers. Refer to the Tailwind documentation on <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#list-markers" target="_blank" class="link link-primary">Marker</a> 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
Separator
A basic form of the inline list with dotted separator.
- Product
- Pro Tips
- Install Guide