Tailwind CSS List Style Type and List Style Position  Examples

In this tutorial we will see List Style Type like , list none, list bullets , list number and List Position inside list , outside list examples with Tailwind CSS



Tool Use

Tailwind CSS 2.x




Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM



List Style Type

In tailwind there are three class available for list type no bullets, bullets and numbers

.list-none

.list-disc

.list-decimal


Example 1

List None

No Bullets

.list-none (default)

<ul class="list-none">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

or

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>


Example 2

Bullets List

.list-disc

<ul class="list-disc">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>


Example 3

List In Number

.list-decimal

<ul class="list-decimal">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>


List Style Position 

In tailwind there are two class available for list style position .list-inside

Example 1

.list-inside

<ul class="list-decimal list-inside bg-gray-200">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

Example 2

.list-outside

<ul class="list-decimal list-outside bg-gray-200">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>


More Components


Tailwind CSS Badge 

Tailwind CSS Search

Tailwind CSS Pagination

Tailwind CSS Table 

Tailwind CSS Button

Tailwind CSS Modals

Tailwind CSS Avatar

Tailwind CSS loading Spinner

Tailwind CSS Progress Bar 

Tailwind CSS Alert Components 

Responsive Card Grid With Tailwind CSS

Tailwind CSS Dropdowns

Tailwind CSS Card

Tailwind CSS List Group

Tailwind CSS Breadcrumbs

Tailwind CSS Accordion (FAQ)

Tailwind CSS Responsive Image Gallery with Grid

Tailwind CSS Tabs