Tailwind CSS List Style Cheatsheet

Complete guide to Tailwind's list style utilities for controlling list markers and their positioning.
Click any class to copy it to your clipboard.

Quick Reference

Class	CSS	Description
list-none	list-style-type: none	Removes all list markers (bullets or numbers).
list-disc	list-style-type: disc	Uses a filled circle (bullet point) as the list marker.
list-decimal	list-style-type: decimal	Uses decimal numbers (1, 2, 3...) as the list marker.
list-inside	list-style-position: inside	Places the marker inside the content flow. Text wraps under the marker.
list-outside	list-style-position: outside	Places the marker outside the content flow (default). Text aligns separately from the marker.

List Style Type

Control the type of list marker (bullet, number, or none) using these utilities.

list-none

list-style-type: none

First item in the list
Second item with more text
Third item example

Removes all list markers (bullets or numbers).

list-disc

list-style-type: disc

First item in the list
Second item with more text
Third item example

Uses a filled circle (bullet point) as the list marker.

list-decimal

list-style-type: decimal

First item in the list
Second item with more text
Third item example

Uses decimal numbers (1, 2, 3...) as the list marker.

List Style Position

Control where the list marker is positioned relative to the list item content. The difference is most visible when list items wrap to multiple lines.

list-inside

list-style-position: inside

Short item
This is a much longer item that will wrap to multiple lines to demonstrate how the list marker position affects text alignment
Another item

Places the marker inside the content flow. Text wraps under the marker.

list-outside

list-style-position: outside

Short item
This is a much longer item that will wrap to multiple lines to demonstrate how the list marker position affects text alignment
Another item

Places the marker outside the content flow (default). Text aligns separately from the marker.

Visual Comparison: Inside vs Outside

Side-by-side comparison showing how text wrapping differs between list-inside and list-outside.

list-inside list-disc

Notice how this longer text wraps underneath the bullet point, not aligned with the text above.
Short item
The marker is inside the content box.

list-outside list-disc

Notice how this longer text wraps and stays aligned with the text above, not under the bullet.
Short item
The marker is outside the content box.

Common Combinations

You can combine list style type and position utilities for different effects.

list-disc list-outside

First item in the list
Second item with more text
Third item example

Classic bullet list style

list-decimal list-inside

First item in the list
Second item with more text
Third item example

Numbered list with inline markers

list-decimal list-outside

First item in the list
Second item with more text
Third item example

Numbered list with aligned text

list-none

First item in the list
Second item with more text
Third item example

Clean list without markers

Common Use Cases

Feature List

list-disc list-inside

<ul class="list-disc list-inside">
  <li>Fast performance</li>
  <li>Easy to use</li>
  <li>Fully responsive</li>
</ul>

Step-by-Step Guide

list-decimal list-outside

<ol class="list-decimal list-outside pl-5">
  <li>Install the package</li>
  <li>Configure settings</li>
  <li>Start the server</li>
</ol>

Card List Items

list-none with custom icons

<ul class="list-none space-y-2">
  <li class="flex items-center gap-2">
    <CheckIcon /> Item one
  </li>
  <li class="flex items-center gap-2">
    <CheckIcon /> Item two
  </li>
</ul>

Custom List Markers with Arbitrary Values

In Tailwind v3.1+, you can use arbitrary values to set custom list style types beyond the default utilities.

list-[square]

First item in the list
Second item with more text
Third item example

list-[circle]

First item in the list
Second item with more text
Third item example

list-[lower-alpha]

First item in the list
Second item with more text
Third item example

list-[upper-roman]

First item in the list
Second item with more text
Third item example

list-[lower-roman]

First item in the list
Second item with more text
Third item example

list-['->']

First item in the list
Second item with more text
Third item example

About Tailwind List Styles

Tailwind's list style utilities control the CSS list-style-type and list-style-position properties, which determine how list items are marked and where those markers appear.

Remember to add left padding (e.g., pl-5) when using list-outside so the markers are visible and not cut off.

For responsive lists, use breakpoint prefixes: md:list-disc, lg:list-inside

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect list styles, typography, spacing, and more with just one click.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →