
### Overview

A super quick guide on how to use PNG images as custom bullet points in tailwindcss.

This feature is available as of Tailwind v3.3.

A demo is available at [here](/demos/custom-bullet-points/).

### Setting up

First, get a small PNG image somewhere accessible. I have a 16 x 16 image in the `/public` folder.

Next, specify the URL using `list-image`. Using the format `list-image-[url(/your/file.png)]`.

An example of using list-image might look like this:

```jsx
<ul className="list-image-[url(/images/demos/carrot.png)] list-disc list-outside ml-6 leading-[3] mt-2">
  <li>Eggs</li>
  <li>Bread</li>
  <li>Milk</li>
</ul>
```

### Final Product

![custom bullet points](/images/demos/custom_bullet_points.png)


<h3>Overview</h3>
<p>A super quick guide on how to use PNG images as custom bullet points in tailwindcss.</p>
<p>This feature is available as of Tailwind v3.3.</p>
<p>A demo is available at <a href="/demos/custom-bullet-points/">here</a>.</p>
<h3>Setting up</h3>
<p>First, get a small PNG image somewhere accessible. I have a 16 x 16 image in the <code>/public</code> folder.</p>
<p>Next, specify the URL using <code>list-image</code>. Using the format <code>list-image-[url(/your/file.png)]</code>.</p>
<p>An example of using list-image might look like this:</p>
<pre><code>&#x3C;ul className="list-image-[url(/images/demos/carrot.png)] list-disc list-outside ml-6 leading-[3] mt-2">
  &#x3C;li>Eggs&#x3C;/li>
  &#x3C;li>Bread&#x3C;/li>
  &#x3C;li>Milk&#x3C;/li>
&#x3C;/ul>
</code></pre>
<h3>Final Product</h3>
<p><img src="/images/demos/custom_bullet_points.png" alt="custom bullet points"></p>
