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 / 3.x

View Demo

Setup Project

Using CDN

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

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>

<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>