Source: https://tailwindcss.com/docs/list-style-image

v4.1

Typography
list-style-image

Typography

list-style-image

Utilities for controlling the marker images for list items.

| Class | Styles | | --- | --- | | list-image-[<value>] | list-style-image: <value>; | | list-image-(<custom-property>) | list-style-image: var(<custom-property>); | | list-image-none | list-style-image: none; |

Examples

Basic example

Use the list-image-[<value>] syntax to control the marker image for list items:

5 cups chopped Porcini mushrooms
1/2 cup of olive oil
3lb of celery
<ul class="list-image-[url(/img/checkmark.png)]"> <li>5 cups chopped Porcini mushrooms</li> </ul>

Using a CSS variable

Use the list-image-(<custom-property>) syntax to control the marker image for list items using a CSS variable:

<ul class="list-image-(--my-list-image)">  <!-- ... --></ul>

This is just a shorthand for list-image-[var(<custom-property>)] that adds the var() function for you automatically.

Removing a marker image

Use the list-image-none utility to remove an existing marker image from list items:

<ul class="list-image-none">  <!-- ... --></ul>

Responsive design

Prefix a list-style-image utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation .