How to get colored bullet list dots just using TailwindCSS utility classes

Question

I'm wondering if there is a strategy to get colored bullet list dots just using Tailwind utility classes and without writing any line of CSS.
I spent some time searching but I haven't found any solution yet.

This is the list I'm working on at the moment.

<ul class='list-outside list-disc ml-6'>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
  <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
  <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

Answer 1

Just add marker:text-color, where color is the color you want:

<ul class='marker:text-green list-outside list-disc ml-6'>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
  <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
  <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

Answer 2

I solved it like this:

<ul class='list-outside list-disc ml-6'>
    <li class="text-red-500">
        <span class="text-black">Lorem ipsum dolor</span>
    </li>
    <li class="text-red-500">
        <span class="text-black">Nunc nec gravida enim.</span>
    </li>
</ul>

Answer 3

Niche answer here, but for those wanting to achieve this in innerHTML in a React component, you can target the li element specifically with:

.your-class {
  li::marker {
    @apply text-sky;
  }
}

<div className='your-class' dangerouslySetInnerHTML={{__html: yourContent}}/>

This answer is an approximation and depends on framework. If you're using Tailwind in React you may already be familiar with 'unresetting' your your base styles. This solution is for those who have done this.

More here and here.