26

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>

6 Answers 6

61

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>
0
9

You will have to specify it like this to achieve a colored bullet list.

<li class="text-red-500">
  <div class="text-black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.
  </div>
</li>
0
9

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>
5

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.

0
3

This worked May 2023 (in the li class):

<ul><li class="list-disc marker:text-red-800">text for this bullet point goes here</li></ul>

or, in the ul class (applies to all discs in the ul):

<ul class="marker:text-indigo-900"><li class="list-disc ">text for this bullet point goes here</li></ul>
1

There can be multiple ways of doing this, below is one of them.

Here, text color will be green & list icon color will be orange

    <ul className="marker:text-color list-inside list-disc text-orange-500 [&>li>p]:inline [&>li>p]:text-green-800">
        <li>
          <p>This is para 1</p>
        </li>
        <li>
          <p>This is para 2</p>
        </li>
        <li>
          <p>This is para 3</p>
        </li>
      </ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.