Tailwind CSS Lists

Build organized and readable Tailwind CSS lists. Display items inline or vertically with bullets, numbers, and checks using ordered and unordered Preline UI lists.

List style types

Use .list-disc, .list-decimal, and .list-none to switch between bullet, number, and plain list styles.

<div>
                            <span class="mb-3 font-medium text-sm text-muted-foreground-1 font-mono">list-decimal</span>
                            <ol class="list-decimal list-inside text-foreground">
                              <li>Now this is a story all about how, my life got flipped turned upside down</li>
                              <li>And I like to take a minute and sit right here</li>
                              <li>I'll tell you how I became the prince of a town called Bel-Air </li>
                            </ol>
                          </div>

<div>
                            <span class="mb-3 font-medium text-sm text-muted-foreground-1 font-mono">list-none</span>
                            <ul class="list-none list-inside text-foreground">
                              <li>Now this is a story all about how, my life got flipped turned upside down</li>
                              <li>And I like to take a minute and sit right here</li>
                              <li>I'll tell you how I became the prince of a town called Bel-Air </li>
                            </ul>
                          </div>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div>
                            <span class="mb-3 font-medium text-sm text-muted-foreground-1 font-mono">list-disc</span>
                            <ul class="list-disc list-inside text-foreground">
                              <li>Now this is a story all about how, my life got flipped turned upside down</li>
                              <li>And I like to take a minute and sit right here</li>
                              <li>I'll tell you how I became the prince of a town called Bel-Air </li>
                            </ul>
                          </div>

Styled markers

Use the marker modifier to style bullets or counters independently from the list text.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xs mx-auto mt-10 flex justify-center"><ul class="marker:text-primary list-disc ps-5 space-y-2 text-sm text-muted-foreground-2">
                            <li>
                              FAQ
                            </li>
                            <li>
                              License
                            </li>
                            <li>
                              Terms & Conditions
                            </li>
                          </ul>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

Inline separator list

Use separator dots to turn inline items into a compact metadata or tag-style list.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xs mx-auto mt-17 flex justify-center"><ul class="text-sm text-muted-foreground-2">
                            <li class="inline-block relative pe-8 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-3 before:-translate-y-1/2 before:size-1 before:bg-surface-2 before:rounded-full">
                              FAQ
                            </li>
                            <li class="inline-block relative pe-8 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-3 before:-translate-y-1/2 before:size-1 before:bg-surface-2 before:rounded-full">
                              License
                            </li>
                            <li class="inline-block relative pe-8 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-3 before:-translate-y-1/2 before:size-1 before:bg-surface-2 before:rounded-full">
                              Terms & Conditions
                            </li>
                          </ul>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

Checked list

Replace the default bullets with check icons for task lists or feature lists.

<li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                License
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                Terms & Conditions
                              </span>
                            </li>
                          </ul>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-primary-50 text-primary-600 dark:bg-primary-500/20 dark:text-primary-400">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                License
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-primary-50 text-primary-600 dark:bg-primary-500/20 dark:text-primary-400">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Terms & Conditions
                              </span>
                            </li>
                          </ul>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-primary text-primary-foreground">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                License
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-primary text-primary-foreground">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Terms & Conditions
                              </span>
                            </li>
                          </ul>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                Terms & Conditions
                              </span>
                            </li>
                          </ul>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-primary-50 text-primary-600 dark:bg-primary-500/20 dark:text-primary-400">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Terms & Conditions
                              </span>
                            </li>
                          </ul>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-primary text-primary-foreground">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Terms & Conditions
                              </span>
                            </li>
                          </ul>

Checked list color variants

Apply different color treatments to checked-list icons, badges, and filled markers.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto sm:mt-8 grid grid-cols-1 sm:grid-cols-3 gap-6"><ul class="space-y-3 text-sm">
                            <li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                Dark
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                Green
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-yellow-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                Yellow
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <svg class="shrink-0 size-4 mt-0.5 text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              <span class="text-foreground">
                                Light
                              </span>
                            </li>
                          </ul>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-teal-50 text-teal-500 dark:bg-teal-500/20 dark:text-teal-400">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Green
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-yellow-50 text-yellow-500 dark:bg-yellow-500/20 dark:text-yellow-400">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Yellow
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-plain/10 text-foreground-inverse">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Light
                              </span>
                            </li>
                          </ul>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-teal-500 text-foreground-inverse">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Green
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-yellow-500 text-foreground-inverse">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Yellow
                              </span>
                            </li>

<li class="flex gap-x-3">
                              <span class="size-5 flex justify-center items-center rounded-full bg-plain text-inverse">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                              </span>
                              <span class="text-foreground">
                                Light
                              </span>
                            </li>
                          </ul>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

Basic usage

List style types

Styled markers

Inline separator list

Checked list

Checked list color variants